使用vue-cli構(gòu)建的vue項(xiàng)目竹宋,webpack的配置文件是分散在很多地方的径筏,而我們需要修改的是build/webpack.base.conf.js嚷堡,修改兩處的代碼
// 在開(kāi)頭引入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'
}
},
// 增加一個(gè)plugins
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
// 其他代碼...
}
這樣就可以正確的使用jQuery了棺滞,比如我要引入Bootstrap裁蚁,我們?cè)趘ue的入口js文件src/main.js開(kāi)頭加入
// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'
這樣Bootstrap就正確的被引用并構(gòu)建。
在比如使用toastr組件继准,只需要在需要的地方import進(jìn)來(lái)枉证,或者全局引入css在需要的地方引用js,然后直接使用
// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'
toastr.success('Hello')