下面Vue.js教學專欄跟大家介紹一下在 Vue.js 中整合 CSS 框架的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
CSS 框架之所以出色是有很多原因的：例如程式碼更容易理解、Web 應用更容易維護、簡化實作原型時的步驟等。一般來說在 VUE 中整合 CSS 框架的方法是相同的，本文以被廣泛使用的 Bootstrap 4 為例。
準備工作
在下載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>
<p class="row">
<p 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>
</p>
</p>
</template/><!--App.vue-->
<template>
<p>
...
<Navigation/>
</p>
</template/>這個元件可能會同時用在頁首和頁尾中，兩者看起來應該不一樣，但是會包含相同的資訊.讓我們刪除佈局 HTML，然後將其移至其父級或基礎元件。
好的例子
<!--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>
...
<p class="row">
<p class="col">
<Navigation/>
</p>
</p>
</template/>總結
CSS 框架讓我們的開發工作更輕鬆。它們使你的模板程式碼保持一致並易於維護和編寫。你可以專注於程式的功能和整體設計，而不是把時間浪費在常見的任務重，例如從頭創建按鈕。
Bootstrap，Bulma 和 Foundation 只是常用的三個框架，但不限於這些。還有許多框架供你探索，例如 Semantic UI 和 UI Kit 等。
英文原文網址：https://www.digitalocean.com/community/tutorials/vuejs-css-frameworks-vuejs
作者：Dave Berning
相關推薦：
更多程式相關知識，請造訪：程式設計課程！ ！
以上是Vue中如何整合CSS框架？方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
