准備工作
在下載 CSS 框架之前，先用 Vue CLI 創建一個新項目：
npm install vue-cli
vue init webpack project-name安裝並集成 Bootstrap 4
創建並初始化新的 Vue 項目后，用 npm 下載 Bootstrap 4。由於 Bootstrap 4 的 JavaScript 依賴於 jQuery，所以還需要安裝 jQuery。
npm install bootstrap jquery --save你需要在自己的 Vue 的 main.js 文件中添加 Bootstrap 依賴項，這樣就可以在整個程序中全局使用。
import './../node_modules/jquery/dist/jquery.min.js'; import './../node_modules/bootstrap/dist/css/bootstrap.min.css'; import './../node_modules/bootstrap/dist/js/bootstrap.min.js';如果你的程序構建失敗，應該安裝 popper.js 依賴項。之后應該就不會報錯了。
npm install --save popper.js這樣 Bootstrap 4 就被集成到 Vue 重了。
安裝並集成 Bulma
Bulma 一個是基於 Flexbox 的輕巧靈活的 CSS 框架。它在 GitHub 上的 star 已有超過了 25K。
與 Bootstrap 不同，Bulma 重僅包含 CSS，沒有 jQuery 或 JavaScript 的依賴項。
安裝 Bulma：
npm install bulma在下載Bulma之后，打開你的 main.js 並將其導入。
/* main.js */ import './../node_modules/bulma/css/bulma.css';這樣就把 Bulma 集成到你的 Vue.js 程序中了。
安裝並集成 Foundation
Foundation 是一個優秀的 CSS 框架。它有兩個框架：一個用於電子郵件，一個用於網站。我們需要的是 Foundation Sites 框架，因為我們只關心在 Web 中使用 Foundation。
安裝 Foundation Sites 並將其導入到你的 main.js 文件中：
$ npm install foundation-sites --save將其導入到你的 main.js 文件中：
/* main.js */ import './../node_modules/foundation-sites/dist/css/foundation.min.css'; import './../node_modules/foundation-sites/dist/js/foundation.min.js';在 Vue中 的最佳做法
以上這三個框架非常類似：它們都基於行和列來創建“網格”的，你可以用它來創建用戶界面。通過網格，你只需添加或更改附加到元素的類，就能輕松地基於設備寬度更改列的寬度。
注意： 下面的例子用的是 Bootstrap4。但是這種基於行列框架的做法適用於所有的 CSS 框架。
最好盡可能使用框架的類。為了易於使用，這些框架中都經過精心的設計，可以進行擴展和自定義。與其使用自己的類創建自己的按鈕，不如用 Bootstrap、Bulma 或 Foundation 來做同樣的事。
<!-- Bootstrap --> <button class="btn btn-primary btn-lg">Bootstrap 大按鈕</button> <!-- Bulma --> <button class="button is-primary is-large">Bulma 大按鈕</button>你可以配置每種顏色，以便 btn-primary (Bootstrap) 或 is-primary (Bulma) 引用你自己樣式的顏色，而不是用 Bootstrap 和 Bulma 附帶的默認顏色。
如果你需要使用自己的樣式來創建自己的主題，可以創建一個覆蓋框架全局樣式的全局樣式表；因為我們並不想直接修改框架。
創建自己的樣式
如果想要創建自己的 CSS 主題，需要先創建一個新的 CSS 文件，並將其放在 assets 目錄中，然后將其導入到 App.vue 文件中。
/* App.vue */ import '@/assets/styles.css'; ...試着將一些與你自己的樣式相匹配的默認樣式映射到 Bootstrap 組件：
/* styles.css */ /* Buttons --------------------------- */ .btn-primary { background: #00462e; color: #fff; } /* dark green */ .btn-secondary { background: #a1b11a; color: #fff; } /* light green */ .btn-tertiary { background: #00b2e2; color: #fff; } /* blue */ .btn-cta { background: #f7931d; color: #fff; } /* orange */ /* Forms --------------------------- */ .form-control { border-radius: 2px; border: 1px solid #ccc; } .form-control:focus, .form-control:active { outline: none; box-shadow: none; background: #ccc; border: 1px solid #000; }注意組件的可重用性
在 Vue.js 中使用 CSS 框架時，要務必牢記組件的可重用性。我們不能把布局 CSS 和組件本身混合在一起使用。有時你可能只需要重用這個組件，而有時可能需要其他的布局。
不好的例子
<!--Navigation.vue--> <template> <div class="row"> <div class="col"> <nav> <ul> <li><a href="#">Navigation Item #1</a></li> <li><a href="#">Navigation Item #2</a></li> <li><a href="#">Navigation Item #3</a></li> </ul> </nav> </div> </div> </template/><!--App.vue--> <template> <div> ... <Navigation/> </div> </template/>這個組件可能會同時用在頁眉和頁腳中，兩者看起來應該不一樣，但是會包含相同的信息。讓我們刪除布局 html，然后將其移至其父級或基礎組件。
https://www.houdianzi.com/huizhoulogo/ 惠州logo設計
好的例子
<!--Navigation.vue--> <template> <nav> <ul> <li><a href="#">Navigation Item #1</a></li> <li><a href="#">Navigation Item #2</a></li> <li><a href="#">Navigation Item #3</a></li> </ul> </nav> </template/><!--App.vue--> <template> ... <div class="row"> <div class="col"> <Navigation/> </div> </div> </template/>總結
CSS 框架使我們的開發工作更加輕松。它們使你的模板代碼保持一致並易於維護和編寫。你可以專注於程序的功能和整體設計，而不是把時間浪費在常見的任務重，例如從頭創建按鈕。