vue-cli4引入jquery和bootstrap

引入jquery

 

1、下載jquery

 npm install jquery --save-dev 

 

2、vue.config.js中webpack配置configureWebpack添加jquery插件

在項目根目錄下創建文件vue.config.js，與package.json同級。

const webpack = require("webpack");
module.exports = {
    configureWebpack: {
        //支持jquery
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ]
    },
};

 

3、package.json中eslint配置項env中添加"jquery":true

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jquery": true //此處配置意思為全局引入jquery，詳情可查看文檔
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

 

4、驗證是否安裝成功

 $(function () {alert (123);}); 

引入Bootstrap

1、安裝bootstrap前，必須先安裝jQuery

 

2、安裝bootstrap，使用命令

 npm install bootstrap --save-dev 

 

可以指定版本，不指定的話會安裝最新的版本。

 npm install bootstrap@3 --save-dev 

 

3、安裝成功后，能夠在package.json文件夾中看到bootstrap這個模塊。這時候需要在main.js中添加如下內容：

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';