在 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 等。