滿大街的復制粘貼膩歪了，就來看看最精簡實用的吧！

我并非專業前端，如果有錯誤請大家指點~

本文使用yarn安裝vue和依賴，npm自行使用。

一、安裝Vue

二、安裝jquery，bootstrap, popper.js，node-sass和sass-loader

bootstrap依賴jquery和popper.js。
由于集成到Vue，所以不使用script標簽引入bootstrap.bundle.js，因此需要安裝popper.js。

由于我習慣使用SCSS引入bootstrap的css樣式，所以需要安裝node-sass和sass-loader。如果是引入編譯后的css，可以不安裝。

sass-loader對于其他博客說的，需要配置webpack，但是我發現，根本不用配置什么，vue也會識別scss，build后也會解析。知道原因的可以跟我講解一下。

BS源碼淺讀

源碼bsvue/node_modules/bootstrap/js/src/index.js中

import $ from 'jquery' import Alert from './alert' ...

由此可見，boostrap自動引入了jquery

編譯后的bsvue/node_modules/bootstrap/dist/js/bootstrap.js中

(function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery'), require('popper.js')) :typeof define === 'function' && define.amd ? define(['exports', 'jquery', 'popper.js'], factory) :(factory((global.bootstrap = {}),global.jQuery,global.Popper)); }...

這段代碼，整體意思我一個非專業人士就不懂了。但是可以根據源碼看出，這是引入了jquery和popper.js。
既然jquery會判斷并且自動加載，那么接下來就簡單了：

運行項目

npm run dev

bsvue/src/App.vue引入bootstrap樣式，這里不加scoped屬性，是為了全局使用。

<style lang="scss"> @import '~bootstrap/scss/bootstrap.scss'; #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; } </style>

添加示例代碼

修改bsvue/src/components/HelloWorld.vue文件，先加入幾個不需要js的組件進來看看樣式是否有了

效果：

接下來加入需要js的組件試試
首先bsvue/src/main.js引入bootstrap

import 'bootstrap'

bsvue/src/components/HelloWorld.vue加入輪播圖組件

<div class="container"><div id="indicators" class="carousel slide w-100" data-ride="carousel" data-keyboard="false" data-pause="hover" data-interval="5000"><ol class="carousel-indicators"><li data-target="#indicators" data-slide-to="0" class="active"></li><li data-target="#indicators" data-slide-to="1"></li><li data-target="#indicators" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img class="d-block w-100" src="../assets/1.jpg"></div><div class="carousel-item"><img class="d-block w-100" src="../assets/2.jpg"></div><div class="carousel-item"><img class="d-block w-100" src="../assets/6.jpg"></div></div><a class="carousel-control-prev" href="#indicators" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span></a><a class="carousel-control-next" href="#indicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span></a></div></div> 效果：

完美運行~~

不足請指出
轉載請留出處~謝謝~

總結

以上是生活随笔為你收集整理的从0开始Vue2集成Bootstrap4（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。