vue-cli 引入jQuery，Bootstrap，popper的方法
1.安装插件
npminstalljquery--save//jquery插件 npminstallbootstrap--save//bootstrap npminstall--savepopper.js//popper.js
2.修改build目录下的webpack.base.conf.js配置文件：
1）加入webpack对象：varwebpack=require('webpack');
2）在module.exports里面加入以下配置：
plugins:[
newwebpack.optimize.CommonsChunkPlugin('common'),
newwebpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
Popper:['popper.js','default']
})
]
webpack.base.conf.js配置文件最终代码
'usestrict'
constpath=require('path')
constutils=require('./utils')
constconfig=require('../config')
constvueLoaderConfig=require('./vue-loader.conf')
constwebpack=require('webpack')
functionresolve(dir){
returnpath.join(__dirname,'..',dir)
}
module.exports={
context:path.resolve(__dirname,'../'),
entry:{
app:'./src/main.js'
},
output:{
path:config.build.assetsRoot,
filename:'[name].js',
publicPath:process.env.NODE_ENV==='production'
?config.build.assetsPublicPath
:config.dev.assetsPublicPath
},
resolve:{
extensions:['.js','.vue','.json'],
alias:{
'vue$':'vue/dist/vue.esm.js',
'@':resolve('src'),
}
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader',
options:vueLoaderConfig
},
{
test:/\.js$/,
loader:'babel-loader',
include:[resolve('src'),resolve('test'),resolve('node_modules/webpack-dev-server/client')]
},
{
test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader:'url-loader',
options:{
limit:10000,
name:utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test:/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader:'url-loader',
options:{
limit:10000,
name:utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader:'url-loader',
options:{
limit:10000,
name:utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node:{
//preventwebpackfrominjectinguselesssetImmediatepolyfillbecauseVue
//sourcecontainsit(althoughonlyusesitifit'snative).
setImmediate:false,
//preventwebpackfrominjectingmockstoNodenativemodules
//thatdoesnotmakesensefortheclient
dgram:'empty',
fs:'empty',
net:'empty',
tls:'empty',
child_process:'empty'
},
plugins:[
newwebpack.optimize.CommonsChunkPlugin('common'),
newwebpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
Popper:['popper.js','default']
})
]
}
3.在main.js中把jQuery，bootstrap的js和css通过import引进来
代码如下：
import$from'jquery' import'bootstrap/dist/css/bootstrap.min.css' import'bootstrap/dist/js/bootstrap.min'
最后重新启动一下：
npmrundev
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。