vue.js怎麼引進bootstrap

vue.js引入bootstrap的方法：首先使用【npm install bootstrap --save-dev】指令進行安裝；然後在【main.js】中使用【import 'bootstrap相關檔案路徑'】語法引入即可。

本教學操作環境：windows7系統、Vue2.9.6&&bootstrap3版，Dell G3電腦。

【相關文章推薦：vue.js】

#vue.js引入bootstrap的方法：

## 1.使用指令:

npm install bootstrap --save-dev

2、安裝成功後，能夠在package.json資料夾中看到bootstrap這個模組。這時候需要在main.js中加入以下內容:

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

至此bootStrap也引進結束，接下來我們的重點來了，因為BootStrap與VUE有一個專門的設計叫做bootstrap-vue.js，所以我們引入它之後就可以直接使用它們提供的專有樣式，比原生的bootStrap要好看很多

#3、使用指令:

npm i vue bootstrap-vue bootstrap

4、在main.js檔案中加入:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

相關免費學習推薦：

javascript（影片）

以上是vue.js怎麼引進bootstrap的詳細內容。更多資訊請關注PHP中文網其他相關文章！