vue2.0正確地引用 jquery 和 jquery-ui的插件
出自: http://www.itnose.net/detail/6647297.html
使用vue-cli構建的vue項目,webpack的配置文件是分散在很多地方的,而我們需要修改的是build/webpack.base.conf.js,修改兩處的代碼
// 在開頭引入webpack,後面的plugins那裏需要
var webpack = require('webpack')
// resolve
module.exports = {
// 其他代碼...
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
// webpack 使用 jQuery,如果是自行下載的
// 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
// 如果使用NPM安裝的jQuery
'jquery': 'jquery'
}
},
// 增加一個plugins
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
// 其他代碼...
}
這樣就可以正確的使用jQuery了,比如我要引入Bootstrap,我們在vue的入口js文件src/main.js開頭加入
// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'
vue-cli webpack全局引入jquery
首先在package.json里加入,
dependencies:{
"jquery" : "^2.2.3"
}
然後 nmp install
在webpack.base.conf.js里加入
var webpack = require("webpack")
在module.exports的最後加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
然後一定要重新 run dev
在main.js 引入就ok了
import $ from 'jquery'