安装vue脚手架；如果已暗转跳过这步
npm install -g @vue/cli
创建一个Vue项目
vue create bootstrap-vue-demo
安装bootstrap和bootstrap-vue
npm install vue bootstrap bootstrap-vue
在main.js中引入
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
报错
1.Module build failed: Error: ENOENT: no such file or directory, open '包路径\bootstrap-vue\node_modules\core-js\modules\es.array.iterator.js'
npm i bootstrap@4.5.3
2.Error: ENOENT: no such file or directory, open 'D:\ahao\studyPath\bootstrap-vue\node_modules\lodash\lodash.js'
npm i lodash -g
3.VUE中使用BootstrapVue图片b-img标签路径显示不出图片问题
新建vue.config.js;安装npm i vue-cli-plugin-bootstrap-vue;配置vue.config.js后重新执行npm run serve
const bootstrapSassAbstractsImports = require('vue-cli-plugin-bootstrap-vue/sassAbstractsImports.js');
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: bootstrapSassAbstractsImports.join('\n')
},
scss: {
additionalData: [...bootstrapSassAbstractsImports, ''].join(';\n')
}
}
}
}
