如何在vue中集成css框架

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';