vue-cli項目引入jquery和bootstrap

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>