在 Vue.js 中集成 CSS 框架

❝
目錄

• 準備工做

• 安裝並集成 Bootstrap 4

• 安裝並集成 Bulma

• 安裝並集成 Foundation

• 在 Vue中 的最佳作法

• 建立本身的樣式

• 注意組件的可重用性

  • 很差的例子

  • 好的例子
• 總結

❞
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>
  <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，而後將其移至其父級或基礎組件。

好的例子

<!--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 框架使咱們的開發工做更加輕鬆。它們使你的模板代碼保持一致並易於維護和編寫。你能夠專一於程序的功能和總體設計，而不是把時間浪費在常見的任務重，例如從頭建立按鈕。

Bootstrap，Bulma 和 Foundation 只是經常使用的三個框架，可是不限於這些。還有許多框架供你探索，好比 Semantic UI 和 UI Kit 等。