共计 3687 个字符，预计需要花费 10 分钟才能阅读完成。
作者：Dave Berning
翻译：疯狂的技术宅
原文：https://www.digitalocean.com/…
未经容许严禁转载
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 等。
本文首发微信公众号：前端先锋
欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章
欢送持续浏览本专栏其它高赞文章：
- 深刻了解 Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13 个帮你进步开发效率的古代 CSS 框架
- 疾速上手 BootstrapVue
- JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
- WebSocket 实战：在 Node 和 React 之间进行实时通信
- 对于 Git 的 20 个面试题
- 深刻解析 Node.js 的 console.log
- Node.js 到底是什么？
- 30 分钟用 Node.js 构建一个 API 服务器
- Javascript 的对象拷贝
- 程序员 30 岁前月薪达不到 30K，该何去何从
- 14 个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩大插件
- Node.js 多线程齐全指南
- 把 HTML 转成 PDF 的 4 个计划及实现
- 更多文章 …
