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