在 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           

建立并初始化新的 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 一個是基于 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 是一個優秀的 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';           

以上這三個架構非常類似：它們都基于行和列來建立“網格”的，你可以用它來建立使用者界面。通過網格，你隻需添加或更改附加到元素的類，就能輕松地基于裝置寬度更改列的寬度。

注意： 下面的例子用的是 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 rel="nofollow" href="#">Navigation Item #1</a></li>
          <li><a rel="nofollow" href="#">Navigation Item #2</a></li>
          <li><a rel="nofollow" href="#">Navigation Item #3</a></li>
        </ul>
      </nav>
    </div>
  </div>
</template/>           

<!--App.vue-->
<template>
  <div>
    ...
    <Navigation/>
  </div>
</template/>           

<!--Navigation.vue-->
<template>
  <nav>
    <ul>
      <li><a rel="nofollow" href="#">Navigation Item #1</a></li>
      <li><a rel="nofollow" href="#">Navigation Item #2</a></li>
      <li><a rel="nofollow" href="#">Navigation Item #3</a></li>
    </ul>
  </nav>
</template/>           

<!--App.vue-->
<template>
  ...
  <div class="row">
    <div class="col">
      <Navigation/>
    </div>
  </div>
</template/>