美文网首页
使用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