如何在vue-cli中引入jQuery，Bootstrap和popper

如何在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对象：var webpack=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

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。