twitter-bootstrap 将引导程序添加到 Vue CLI 项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42684661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding bootstrap to Vue CLI project
提问by Ashbury
I'm new to Vue and webpack in general and I'm having a hard time figuring out how to import things.
我一般是 Vue 和 webpack 的新手，我很难弄清楚如何导入东西。
I created a fresh Vue project through vue initI added bootstrap 4 with yarn add [email protected]
我通过vue init添加 bootstrap 4创建了一个新的 Vue 项目yarn add [email protected]
In main.jsI try to import bootstrap and jquery:
在main.js 中，我尝试导入 bootstrap 和 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.
未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery。jQuery 必须包含在 Bootstrap 的 JavaScript 之前。
window.jQuery = window.$ = $;does notwork
window.jQuery = window.$ = $;确实不工作
Finally, where and how do I load the Sass such that it's available to the whole app?
最后，我在哪里以及如何加载 Sass 以便它对整个应用程序可用？
回答by Culpepper
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.
我遇到了同样的问题，这就是我最终得到的结果，自从测试版发布以来，我没有使用 Bootstrap alpha。
Install Bootstrap along with its dependencies, jQuery and Popper.js:
npm install [email protected] popper.js jquery --save-devEdit your /build/webpack.dev.conf.jsfile to add a plugin for jQuery and Popper.js to deal with dependencies (you can read more about herein 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",... }) ... ]Edit /src/main.jsto import Bootstrap into the app's entry point:
import Vue from 'vue' import App from './App' import router from './router' import 'bootstrap'Edit the App.vue' file's
<style>portion to import Bootsrap into your app's root css:
安装 Bootstrap 及其依赖项，jQuery 和 Popper.js：
npm install [email protected] popper.js jquery --save-dev编辑你的/build/webpack.dev.conf.js文件，为 jQuery 和 Popper.js 添加一个插件来处理依赖项（你可以在 Bootstrap 文档中阅读更多关于这里的信息）：
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",... }) ... ]编辑/src/main.js以将 Bootstrap 导入应用程序的入口点：
import Vue from 'vue' import App from './App' import router from './router' import 'bootstrap'编辑 App.vue 文件的
<style>部分以将 Bootsrap 导入到应用程序的根 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>
Run your Vue app from the CLI
npm start
从 CLI 运行您的 Vue 应用程序
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.
我必须在 #app 选择器之后添加 @import 规则，否则 Bootstrap 导入会取消范围样式。我认为有更好的方法来做到这一点，所以我会在弄清楚后更新我的答案。
回答by ARUN Madathil
You don't want to do any kind of adjustment in webpack.config.jslike adding jQuery global in plugin array.
Once you installed all bootstrapdependencies like jQueryand popperthan just importthem in app.vueor main.js(you can import separately in each component if you wish)
你不想做任何类型的调整，webpack.config.js比如在插件数组中添加 jQuery 全局。一旦你安装了所有bootstrap依赖项jQuery，popper而不仅仅是import它们在app.vueor 中main.js（如果你愿意，你可以在每个组件中单独导入）
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'
thats it ..
而已 ..
回答by Ahmed Bouchefra
With Vue CLI v3, you can also use the vue-cli-plugin-bootstrapto quickly add the latest Bootstrap 4 version in your Vue project without manually adding any files or settings. The plugin will take care of adding any configuration options and install the dependencies into your project so you can start using Bootstrap classes right away without spending time figuring out what settings or dependencies you need to add.
借助 Vue CLI v3，您还可以使用vue-cli-plugin-bootstrap在您的 Vue 项目中快速添加最新的 Bootstrap 4 版本，而无需手动添加任何文件或设置。该插件将负责添加任何配置选项并将依赖项安装到您的项目中，这样您就可以立即开始使用 Bootstrap 类，而无需花时间弄清楚您需要添加哪些设置或依赖项。
回答by goose
I will try to be as precise as possible
我会尽量准确
1.Go the the Vue Cli project run :
1.Go Vue Cli 项目运行：
npm i bootstrap jquery popper.js
npm i bootstrap jquery popper.js
2.Go to src/main.jsimport like:
2.转到src/main.js导入：
import 'bootstrap';import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';import 'bootstrap/dist/css/bootstrap.min.css';
回答by Dimitris Filippou
For Gridsomeusers, the solution is exactly the same!
对于Gridsome用户，解决方案完全一样！
yarn add jquery bootstrap popper.js
import 'jquery/src/jquery.js';
import 'popper.js/dist/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js';
You can also import the css here like this
import 'bootstrap/dist/css/bootstrap.min.css'however bootstrap provides a SCSS file which can be highly customisable, if you want this kind of customisation, import in the main.jsfile a new scss file
您也可以像这样在此处导入 css，
import 'bootstrap/dist/css/bootstrap.min.css'但是 bootstrap 提供了一个可以高度自定义的 SCSS 文件，如果您想要这种自定义，请在main.js文件中导入一个新的 scss 文件
// Load core styling
import '~/assets/styles/core.scss';
and then import bootstrap like this
然后像这样导入引导程序
@import '~bootstrap/scss/bootstrap';
@import 'theme.scss';
The theme.scss follows this document https://getbootstrap.com/docs/4.0/getting-started/theming/
theme.scss 遵循本文档https://getbootstrap.com/docs/4.0/getting-started/theming/
回答by user7331530
jQuery is not required in current version (Right now: "bootstrap": "^4.4.1", "bootstrap-vue": "^2.5.0")
当前版本不需要 jQuery（现在：“bootstrap”：“^4.4.1”，“bootstrap-vue”：“^2.5.0”）
- install bootstrap
npm install bootstrap-vue bootstrap --save
- Then, register BootstrapVue in your app entry point (main.js)
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';Vue.use(BootstrapVue)
- And import Bootstrap and BootstrapVue css files in main.js:
import 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'
- 安装引导程序
npm install bootstrap-vue bootstrap --save
- 然后，在您的应用程序入口点 (main.js) 中注册 BootstrapVue
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';Vue.use(BootstrapVue)
- 并在 main.js 中导入 Bootstrap 和 BootstrapVue css 文件：
import 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'
回答by Qais Abou Jaoudé
use BootstrapCDN and include it as a in your index.html
使用BootstrapCDN 并将其包含在 index.html 中
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I never used Bootsrap with Vue.js, as I'm not a fan. But when I used Bulma's sass, first I did npm installfor Bulma. Then I created a folder in src/assets/sassand inside it created a main.scssand inside it I imported bulma by @import '~bulma/bulma';
我从来没有在 Vue.js 中使用过 Bootsrap，因为我不是它的粉丝。但是当我使用布尔玛的 sass 时，我首先是npm install为布尔玛做的。然后我在其中创建了一个文件夹，src/assets/sass并在其中创建了一个文件夹，并在其中main.scss导入了 bulma@import '~bulma/bulma';
