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