美文网首页让前端飞Web前端之路H5技术栈
vue-cli项目引入jquery和bootstrap

vue-cli项目引入jquery和bootstrap

作者: 手指乐 | 来源:发表于2019-10-08 09:59 被阅读0次
  1. 安装插件
npm install jquery --save
npm install bootstrap --save
npm install popper.js --save   //提示框插件,bootstrap4依赖它

2.配置插件:

webpack.base.conf.js的module.exports里加入:

plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
],

webpack.ProvidePlugin插件里面可以配置全局引用,比如此处配置了jquery的使用,后面再vue里使用$,jQuery,windows.JQuery都等同于使用jquery,不需要再require或import
3.main.js中添加:

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

4.配置.eslintrc.js:

env: {
......
jquery: true
},

在引用全局变量的时候,必须指明变量所在的环境,比如node,browser,jquery,否则eslint会包no-undef错误
也可以配置关闭这个错误:
'no-undef':0,
这个错误只是eslint的报错,并不会真正的错误

5.测试代码:
app.vue:

<script>
$(function () {
alert('234')
})

export default {
name: 'App'
}
</script>

相关文章

网友评论

    本文标题:vue-cli项目引入jquery和bootstrap

    本文链接:https://www.haomeiwen.com/subject/asavpctx.html