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';