将引导程序添加到 Vue CLI 项目 [英] Adding bootstrap to Vue CLI project

问题描述

我是 Vue 和 webpack 的新手，我很难弄清楚如何导入东西.

我通过 vue init 创建了一个新的 Vue 项目 我用 yarn add bootstrap@4.0.0-alpha.6

添加了 bootstrap 4

在 ma​​in.js 中，我尝试导入 bootstrap 和 jquery:

从'vue'导入Vue；从'jquery'导入jQuery；从引导程序"导入引导程序；从'./App'导入应用程序；从'./router'导入路由器；

但我明白了:

<块引用>

未捕获的错误:Bootstrap 的 JavaScript 需要 jQuery.jQuery 必须是包含在 Bootstrap 的 JavaScript 之前.

window.jQuery = window.$ = $;没有工作

最后，我应该在哪里以及如何加载 Sass 以使其可供整个应用程序使用?

解决方案

我遇到了同样的问题，这就是我最终得到的结果，自从测试版发布以来，我没有使用 Bootstrap alpha.

>

---

1. 安装 Bootstrap 及其依赖项、jQuery 和 Popper.js:

npm install bootstrap@4.0.0-beta popper.js jquery --save-dev

2. 编辑您的 /build/webpack.dev.conf.js 文件，为 jQuery 和 Popper.js 添加一个插件来处理依赖项(您可以在

   ---

   <块引用>

   我必须在#app 选择器之后添加@import 规则，否则范围样式将被 Bootstrap 导入取消.我认为有更好的方法可以做到这一点，所以我会在弄清楚后更新我的答案.

   I'm new to Vue and webpack in general and I'm having a hard time figuring out how to import things.

   I created a fresh Vue project through vue init I added bootstrap 4 with yarn add bootstrap@4.0.0-alpha.6

   In main.js I try to import bootstrap and jquery:

   import Vue from 'vue';
   import jQuery from 'jquery';
   import bootstrap from 'bootstrap';
   import App from './App';
   import router from './router';
   

   But I get:

   Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

   window.jQuery = window.$ = $; does not work

   Finally, where and how do I load the Sass such that it's available to the whole app?

   解决方案

   I was having the same issue and this is what I ended up with however, I didn't use Bootstrap alpha since the beta has since been released.

   ---

   1. Install Bootstrap along with its dependencies, jQuery and Popper.js:

   npm install bootstrap@4.0.0-beta popper.js jquery --save-dev
   

   2. Edit your /build/webpack.dev.conf.js file to add a plugin for jQuery and Popper.js to deal with dependencies (you can read more about that in the Bootstrap docs):

   plugins: [
       // ...
       new webpack.ProvidePlugin({
           $: 'jquery',
           jQuery: 'jquery',
           'window.jQuery': 'jquery',
           Popper: ['popper.js', 'default'],
           // In case you imported plugins individually, you must also require them here:
           Util: "exports-loader?Util!bootstrap/js/dist/util",
           Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
           // ...
       })
       // ...
   ]
   

   3. Edit /src/main.js to import Bootstrap into the app's entry point:

   import Vue from 'vue'
   import App from './App'
   import router from './router'
   import 'bootstrap' // ←
   

   4. Edit the App.vue' file's <style> portion to import Bootsrap into your app's root css:

   <template>
     <div id="app">
       <img src="./assets/logo.png">
       <router-view></router-view>
     </div>
   </template>
   
   <script>
   export default {
     name: 'app'
   }
   </script>
   
   <style>
   #app {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   
   @import'~bootstrap/dist/css/bootstrap.css'
   </style>
   

   5. Run your Vue app from the CLI

   npm start
   

   ---

   I had to add the @import rule after the #app selector, otherwise the scoped styling would be canceled out by the Bootstrap import. I think there is a better way to do this so I will update my answer once I figure it out.

   这篇关于将引导程序添加到 Vue CLI 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！