介绍
CSS 框架有许多原因;代码更普遍理解,Web 应用程序更容易维护,原型化不再是开发过程的一个额外步骤,而是更多的一部分。
本文中的代码示例将使用 Bootstrap 4 编写,因为它是最广泛使用的代码,但是,最佳实践适用于所有人。
在 Vue.js 中添加框架
在开始下载 CSS 框架之前,请确保使用 Vue CLI安装和创建一个新项目,并按照提示:
1npm install vue-cli
2vue init webpack project-name
安装 Bootstrap 4
初始化新 Vue 项目后,下载 Bootstrap 4 以npm。 由于 Bootstrap 4 的 JavaScript 依赖于 jQuery,您还需要安装 jQuery。
1npm install bootstrap jquery --save
您将希望在您的 Vue 导入下方添加您的 main.js 文件中的 Bootstrap 依赖性,以便整个应用程序在全球范围内可用。
1[label main.js]
2import './../node_modules/jquery/dist/jquery.min.js';
3import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
4import './../node_modules/bootstrap/dist/js/bootstrap.min.js';
如果您的应用程序无法构建,只需安装popper.js依赖性,然后它应该正确构建。
1npm install --save popper.js
Bootstrap 4 已安装! Bootstrap 的文档是一个很好的资源,可以让您开始使用列,行,按钮等基本知识。
安装Bulma
Bulma是基于Flexbox的轻量级和灵活的CSS框架,由Jeremy Thomas(https://twitter.com/jgthms)创建,该框架在GitHub上有超过25000颗星星。
与Bootstrap不同,Bulma只包含CSS,因此没有jQuery或JavaScript依赖。
安装Bulma:
1npm install bulma
Bulma 下载后,打开您的main.js 并导入它。
1[label main.js]
2import './../node_modules/bulma/css/bulma.css';
Bulma 现在已经准备好在您的 Vue.js 应用程序中使用,Bulma 文档(https://bulma.io/documentation/overview/start/)是一个伟大的资源,让你开始。
建立基金会
基金会是由Zurb优秀人士创建的框架。基金会有两个框架;一个用于电子邮件和一个用于网站。我们想要 基金会网站框架,因为我们只关心在我们的Web应用程序中使用基金会。
安装 Foundation Sites 并将其导入到您的 main.js 文件中:
1$ npm install foundation-sites --save
将其导入到您的 main.js 文件中:
1[label main.js]
2import './../node_modules/foundation-sites/dist/css/foundation.min.css';
3import './../node_modules/foundation-sites/dist/js/foundation.min.js';
基金会文件是学习Zurb基金会框架的内容和成果的绝佳资源。
通过Vue实施最佳实践
至于它们的核心,这三个框架非常相似:它们都与行和列一起工作. 这些行和列创建了一个网格,你可以利用它来创建你的用户界面。
<$>[注] **注:**如前所述,下面的示例使用 Bootstrap 4. 然而,这些基于行列列的框架的最佳做法适用于所有人。
每一个框架都经过精心设计,以便轻松使用、可扩展和定制,而不是用自己的类创建自己的按钮,只需使用 Bootstrap、Bulma 或 Foundation 创建一个按钮。
1<!-- Bootstrap -->
2<button class="btn btn-primary btn-lg">I'm a large Bootstrap button</button>
3
4<!-- Bulma -->
5<button class="button is-primary is-large">I'm a large Bulma button</button>
您可以配置每个颜色以便btn-primary (Bootstrap) 或is-primary (Bulma) 参考您的品牌颜色,而不是与 Bootstrap 和 Bulma 分别发送的默认蓝色/绿色颜色。
如果您需要用自己的品牌创建自己的主题,您可以创建一个全球风格表,将框架的全球风格覆盖;您不希望直接修改框架。
创建自己的主题
要创建自己的主题,创建一个新的CSS文件,并将其放在资产目录中,并将其导入到您的App.vue文件中。
1[label App.vue]
2import '@/assets/styles.css';
3...
尝试将一些与您的品牌相匹配的默认风格与 Bootstrap 某些组件进行映射:
1[label styles.css]
2/* Buttons
3--------------------------- */
4.btn-primary { background: #00462e; color: #fff; } /* dark green */
5.btn-secondary { background: #a1b11a; color: #fff; } /* light green */
6.btn-tertiary { background: #00b2e2; color: #fff; } /* blue */
7.btn-cta { background: #f7931d; color: #fff; } /* orange */
8
9/* Forms
10--------------------------- */
11.form-control {
12 border-radius: 2px;
13 border: 1px solid #ccc;
14}
15
16.form-control:focus,
17.form-control:active {
18 outline: none;
19 box-shadow: none;
20 background: #ccc;
21 border: 1px solid #000;
22}
记住组件的可重复使用性
当使用任何 CSS 框架和 Vue.js 时,重要的是要记住组件的可重复使用性。我指的是什么?好吧,你不希望将 CSS 布局与组件本身混合起来。
一个糟糕的例子
1[label Navigation.vue]
2<template>
3 <div class="row">
4 <div class="col">
5 <nav>
6 <ul>
7 <li><a href="#">Navigation Item #1</a></li>
8 <li><a href="#">Navigation Item #2</a></li>
9 <li><a href="#">Navigation Item #3</a></li>
10 </ul>
11 </nav>
12 </div>
13 </div>
14</template/>
1[label App.vue]
2<template>
3 <div>
4 ...
5 <Navigation/>
6 </div>
7</template/>
此导航可能旨在用于标题和脚印,两者都应该看起来非常不同,但包含相同的信息。
更好的例子
1[label Navigation.vue]
2<template>
3 <nav>
4 <ul>
5 <li><a href="#">Navigation Item #1</a></li>
6 <li><a href="#">Navigation Item #2</a></li>
7 <li><a href="#">Navigation Item #3</a></li>
8 </ul>
9 </nav>
10</template/>
1[label App.vue]
2<template>
3 ...
4 <div class="row">
5 <div class="col">
6 <Navigation/>
7 </div>
8 </div>
9</template/>
结论
CSS 框架使您作为开发人员的生活变得更容易,它们使您的应用程序的模板代码普遍理解,一致,易于维护,更容易编写,您可以更多地关注应用程序的功能和整体设计,而不是专注于常见的任务,例如从头开始创建按钮。
Bootstrap、Bulma 和 Foundation 只是目前广泛使用的三种框架,但您并不局限于这些框架,还有很多其它框架可供您探索,包括 Semantic UI和 UI Kit。