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

  • 时间:
  • 浏览:34
  • 来源:恰卡网

导读如何在vue-cli中引入jQuery,Bootstrap和popper?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。 1.安装插...

如何在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

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

猜你喜欢

accesstoken中怎么获取用户黑名单列表

这篇文章将为大家详细讲解有关accesstoken中怎么获取用户黑名单列表,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 公众号可登录

2021-07-29

Java中怎么利用轮询获取线程返回数据

Java中怎么利用轮询获取线程返回数据,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 1. 多线程的特点 一般程序中

2021-07-29

XamarinEssentials中怎么获取首选项的值

这期内容当中小编将会给大家带来有关XamarinEssentials中怎么获取首选项的值,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 XamarinEssentials教程获取首

2021-07-29

jQuery中怎么获取内容和属性

这篇文章给大家介绍jQuery 中怎么获取内容和属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 jQuery - 获取内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方

2021-07-29