使用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样式已经引用到项目了。
黄山市民网:https://www.huangshanshimin.com/