vue引用bootstrap3

2022-10-18,,

使用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样式已经引用到项目了。

《vue引用bootstrap3.doc》

下载本文的Word格式文档,以方便收藏与打印。