下面vue.js教程栏目给大家介绍一下在 vue.js 中集成 css 框架的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
css 框架之所以出色是有很多原因的：比如代码更容易理解、web 应用更容易维护、简化实现原型时的步骤等。一般来说在 vue 中集成 css 框架的方法是相同的，本文以被广泛使用的 bootstrap 4 为例。
准备工作
在下载 css 框架之前，先用 vue cli 创建一个新项目：
npm install vue-clivue 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> <p class="row"> <p 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> </p> </p></template/>
<!--app.vue--><template> <p> ... <navigation/> </p></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> ... <p class="row"> <p class="col"> <navigation/> </p> </p></template/>
总结
css 框架使我们的开发工作更加轻松。它们使你的模板代码保持一致并易于维护和编写。你可以专注于程序的功能和整体设计，而不是把时间浪费在常见的任务重，例如从头创建按钮。
bootstrap，bulma 和 foundation 只是常用的三个框架，但是不限于这些。还有许多框架供你探索，比如 semantic ui 和 ui kit 等。
英文原文地址：https://www.digitalocean.com/community/tutorials/vuejs-css-frameworks-vuejs
作者：dave berning
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程课程！！
以上就是vue中如何集成css框架？方法介绍的详细内容。