当前位置： 移动技术网 > IT编程>开发语言>.net > vue引用bootstrap3

vue引用bootstrap3

2019年07月26日  | 移动技术网IT编程  | 我要评论

使用bootstrap3对界面进行栅格布局的效果比element-ui的效果要强很多，主要体现在不同设备的显示上，element-ui在这方面有所欠缺。。。

引用bootstrap   yarn add bootstrap@3

基于jquery，因此还需要引用2个包，jquery和popper.js， yarn add jquery popper.js -s

引用完后在项目中创建一个配置文件(跟package.json同级)，命名vue.config.js，将下面的代码复制进去。。。

const webpack = require('webpack')

module.exports = {
　　chainwebpack: (config) => {
　　　　config.plugin('provide').use(webpack.provideplugin, [{
　　　　$: 'jquery',
　　　　jquery: 'jquery',
　　　　jquery: 'jquery',
　　　　'window.jquery': 'jquery'
　　　　}])
　　},
　　css: {
　　　　sourcemap: true
　　},
　　devserver: {
　　　　port: 8040
　　}
}
 
然后在main.js引用下面两个文件
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
此时bootstrap样式已经引用到项目了。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网