滿大街的複製粘貼膩歪了,就來看看最精簡實用的吧!
我並非專業前端,如果有錯誤請大家指點~
本文使用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>
效果:
完美運行~~
不足請指出
轉載請留出處~謝謝~