將引導程序添加到 Vue CLI 項目

Question

一般來說，我是 Vue 和 webpack 的新手，我很難弄清楚如何導入東西。

我通過vue init創建了一個新的 Vue 項目我用yarn add bootstrap@4.0.0-alpha.6添加了 bootstrap 4

在main.js我嘗試導入引導程序和 jquery：

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

但我得到：

未捕獲的錯誤：引導程序的 JavaScript 需要 jQuery。 jQuery 必須包含在 Bootstrap 的 JavaScript 之前。

window.jQuery = window.$ = $; 不工作

最后，我在哪里以及如何加載 Sass 以使其可用於整個應用程序？

Answer 1

我遇到了同樣的問題，這就是我最終得到的結果，自從測試版發布以來，我沒有使用 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 添加一個插件來處理依賴項（您可以在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",
        // ...
    })
    // ...
]

3. 編輯/src/main.js以將 Bootstrap 導入應用程序的入口點：

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

4. 編輯 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>

5. 從 CLI 運行您的 Vue 應用程序

npm start

---

我必須在 #app 選擇器之后添加 @import 規則，否則 Bootstrap 導入會取消范圍樣式。 我認為有更好的方法可以做到這一點，所以一旦我弄清楚了，我會更新我的答案。

Answer 2

你不想在webpack.config.js做任何調整，比如在插件數組中添加 jQuery 全局。 一旦你安裝了所有的bootstrap依賴，比如jQuery和popper不是僅僅在app.vue或main.js import它們（如果你願意，你可以在每個組件中單獨導入）

import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'

就是這樣 ..

Answer 3

使用 Vue CLI v3.x/v4.x，您還可以使用@techiediaries/vue-cli-plugin-bootstrap快速在您的 Vue 項目中添加最新的 Bootstrap 4 版本，而無需手動添加任何文件或設置。

轉到新的命令行界面，導航到您的項目文件夾並運行以下命令：

$ vue add @techiediaries/bootstrap

該插件將負責添加任何配置選項並將依賴項安裝到您的項目中，這樣您就可以立即開始使用 Bootstrap 類，而無需花時間弄清楚需要添加哪些設置或依賴項。

Answer 4

我會盡量准確

1.Go Vue Cli 項目運行：

npm i bootstrap jquery popper.js

2.轉到src/main.js導入，如：

import 'bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css';

Answer 5

僅適用於 Bootstrap 5

按照下面的cmd

1. vue 創建項目名稱

2. 選擇Vue版本

3. cd 項目名稱

4. npm i bootstrap @popperjs/core （只是引導意味着最新的可用引導版本）

    (or)

   i)npm i bootstrap（安裝引導程序）

   ii)npm install --save @popperjs/core（安裝popper.js）

   注意：如果只有第 4 點發出錯誤，請嘗試此操作

5. 將以下內容添加到 src/main.js import 'bootstrap'; 導入 'bootstrap/dist/css/bootstrap.min.css';

6. 現在完成 bootstrap 將在 Vue-Cli 上工作

Answer 6

對於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';

您也可以像這樣import 'bootstrap/dist/css/bootstrap.min.css'在這里import 'bootstrap/dist/css/bootstrap.min.css'但是 bootstrap 提供了一個可以高度自定義的 SCSS 文件，如果您想要這種自定義，請在main.js文件中導入一個新的 scss 文件

// Load core styling
import '~/assets/styles/core.scss';

然后像這樣導入引導程序

@import '~bootstrap/scss/bootstrap';
@import 'theme.scss';

theme.scss 遵循本文檔https://getbootstrap.com/docs/4.0/getting-started/theming/

Answer 7

根據您已經安裝的軟件包（例如 Vuetify），您可能無法使用 boostrap 4 + vue 3。在按照線程中的說明操作之前，請檢查您的版本以確認！

Answer 8

與 JS 生態系統中的往常一樣，答案很快就會過時。這就是我現在的工作：

$ yarn add jquery bootstrap @popperjs/core
├─ @popperjs/core@2.11.5
├─ bootstrap@5.2.0
└─ jquery@3.6.0

// main.js
import '@popperjs/core/dist/umd/popper';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'

Answer 9

兄弟，您好！ 在Vue 項目中安裝和配置 Bootstrap的簡單方法是

1. 首先使用 IDE 終端中的命令安裝引導程序，如下所示：

   npm i 引導

2. 您需要在 main.js 文件中配置它，以便將其應用於整個項目。 您需要從node_modules文件夾中導入它才能在項目中使用它。

   導入“../node_modules/bootstrap/dist/css/bootstrap.css”；

   導入“../node_modules/bootstrap/dist/js/bootstrap.bundle”；

只需將這些行粘貼到您的main.js文件中，因為這是您所需的引導文件所在的路徑，如果不是，則檢查路徑並編輯此路徑。

如果您想測試它是否工作，go 到應用程序組件並創建一個按鈕，為其提供引導程序 class並運行項目以查看它是否工作。

謝謝，保重：）

單擊此鏈接以查看它對我有用

Answer 10

使用Bootstrap CDN 並將其包含在 index.html 中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

我從來沒有在 Vue.js 中使用過 Bootsrap，因為我不是它的粉絲。 但是當我使用 Bulma 的 sass 時，我首先為 Bulma 做了npm install 。 然后我在src/assets/sass創建了一個文件夾，並在其中創建了一個main.scss並在其中通過@import '~bulma/bulma';導入了 bulma @import '~bulma/bulma';

Answer 11

當前版本不需要 jQuery（現在：“bootstrap”：“^4.4.1”，“bootstrap-vue”：“^2.5.0”）

• 安裝引導程序
  • 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'