[Vue]安裝Bootstrap

  • 1913
  • 0
  • Vue
  • 2019-12-10

vue 要安裝bootstrap 有兩種方式

一個是安裝Vue 中的Bootstrap 套件(Bootstrap Vue)

另外一個就是直接安裝Bootstrap 

因為本身對bootstrap 比較熟悉 所以以安裝Bootstrap為主

版本:vue cli3

BootStrap : 4

先建立一個專案 

vue create installbootstrapdemo

 

首先要先確定 popper.js和確定Jquery的版本

我比較偷懶直接下upgrade讓他裝最新的

npm install popper.js --upgrade
npm install jquery --upgrade

都安裝好了之後

就可以直接安裝Bootstrap

npm install bootstrap

安裝完成以後可以打開專案下的package.json

確定有了以下的相依套件之後,就來進入設定階段了

"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.0",

 

(如此圖 都安裝好惹)

在 main.js 中輸入

import "bootstrap"; // 從nodeModule中載入Bootstrap
import "bootstrap/dist/css/bootstrap.min.css"; // Import css file

在Src/views/Home.vue 中 修改 <HelloWorld mag"Welcome to Your Vue.js App"> 這個component 後面加上 class="text-danger"
(text-danger 是把字體變成紅色)

<HelloWorld msg="Welcome to Your Vue.js App" class="text-danger"/>

 

修改前

修改後

完成!

以上程式碼已上傳至GitHub

-----------------------------------------

有時在會走之前你就得跑

你不解決問題 就等問題解決你