来个性质想在vue中用一下bootstarp 的响应式框架,结果jquery一直导不进来,网上教程都不全,一直给我报了很多错误,给我整蒙了一晚上,特此记录!!
1.首先一定要在项目的根目录下面npm
2.下载jquery
npm install jquery --save-dev
3.也是在项目的根目录下面创建vue.config.js
参考第一张图片的vue.config.js位置
const webpack = require("webpack");
module.exports = {
// 基本路径
publicPath: './',
configureWebpack: {
//支持jquery
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
},
}
4、package.json中eslint配置项env中添加"jquery":true
"jquery": true
5.还是在page.json中,第一个大括号的“rules”里面加入下面的代码
注意:是在第一个大括号
"rules": {
"generator-star-spacing": "off",
"no-tabs":"off",
"no-unused-vars":"off",
"no-console":"off",
"no-irregular-whitespace":"off",
"no-debugger": "off"
}
6、随便找一个vue界面调用,验证是否安装成功
$(function () {alert (123);});
完成!
7.最后导入bootstarp
npm install bootstrap --save-dev
指定版本用
npm install bootstrap@3 --save-dev
最后在main.js 里面添加
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';