美文网首页
使用vue脚手架创建Vue项目并引入bootstrap-vue

使用vue脚手架创建Vue项目并引入bootstrap-vue

作者: hao102 | 来源:发表于2022-01-10 14:32 被阅读0次

安装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')
            }
        }
    }
}

相关文章

网友评论

      本文标题:使用vue脚手架创建Vue项目并引入bootstrap-vue

      本文链接:https://www.haomeiwen.com/subject/podmcrtx.html