vue-cli4引入jquery和bootstrap 引入jquery 引入Bootstrap
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';