建议不要使用bootstrap, 首先集成比较麻烦,还需要使用jquery,
开发pc端web,可以使用element-ui, iview-ui等
开发移动端web,可以使用 VUX, Cube-UI
参考 https://docschina.org
集成bootstrap
1.安装jquery
npm install jquery --S
然后修改 /build/webpack.base.conf.js 里两个地方
①在文件内容最外层定义一个常量 const webpack = require('webpack')
②在module.exports里加入
plugins:[
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
③最后在mian.js中引入import $ from 'jquery 并 Vue.use($)
2 下载配置bootstrap
下载bootstrap https://v3.bootcss.com/
下载自定义bootstrap https://getbootstrap.com/docs/3.3/customize/
把下载下来的文件解压 放到static里面
在webpack.base.conf.js里面搜索 alias,在里面添加bootstrap路径
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'bootstrap':resolve('static/bootstrap'), //添加bootstrap的路径定位
}
最后在main.js中引入 就可以使用bootstrap功能,
import'bootstrap/js/bootstrap.min.js'
import'bootstrap/css/bootstrap.min.css'
引入之后在网页console窗口出现两个错误不影响使用,忽略就是
