Bootstrap、Semantic UI 和 Bulma 在 VueJS 中的应用对比

AWS 安全直播！

今天我将介绍并比较三个现代的基于 CSS 的前端 Web 和移动框架，它们可以与 VueJS 2 配合使用。

对于每个框架，我都使用了第三方编写的配套库，这使得在 VueJS 项目中使用该框架变得更加容易。

我测试过的版本有：

• Bootstrap-vue 1.5.1（版本 2 即将发布）搭配Bootstrap 4.1.1
• Semantic-ui-vue 0.2.8 和Semantic UI 2.3.1
• Buefy 0.6.5 与Bulma 0.6.2
• VueJS 2.5.16

只要主要版本保持不变，本文仍然适用。

我添加了一些与入门相关的代码示例，但请不要将其视为完整的万无一失指南，因为为了简洁起见，我没有包含启动新项目所需的一切。

先决条件

本文需要您安装nodejs/npm（最好是最新版本，并包含优秀的 npx 二进制文件）、parcel和VueJS。此外，您还可以选择安装vue-cli来创建新项目。

Bootstrap

Bootstrap 在 Web 开发领域已经存在很长时间了，最​​新版本在他们迄今为止打造的优秀框架基础上进行了改进。对许多人来说，它是默认选择。

版本 4 进行了多项改进和更改，最显著的是：不再支持 Internet Explorer 8，默认支持 Flexbox，从 Less 迁移到 Sass，并将单位从像素更改为 rem 等相对单位。自定义构建器、Glyphicons 和 Grunt 均已被移除；现在只需使用 Sass 从 Bootstrap 引入所需内容即可，您可以自由选择图标集和构建工具，但建议使用 npm 脚本。

入门

使用 vue-cli 创建新项目时，bootstrap-vue 文档中的指南非常快捷方便。如果您安装了最新版本的 npm，则可以通过运行以下命令来减少一条命令。

npx vue init bootstrap-vue/webpack-simple your-project-name-here

然后就是通常的情况。

cd your-project-name-here
npm install
npm run dev

轻而易举！我个人更倾向于使用Parcel来避免复杂的 Webpack 配置，但 Webpack 更为普及，因此你会获得更多支持，而且它会自动生成配置文件，足以满足大多数使用场景，所以这方面没什么大问题。

判决

很难对一个运行如此出色的东西提出异议。如果你想要大量的社区支持、主题和自定义选项，那么 Bootstrap 就是你的理想之选。它本身并没有什么问题，所以如果你对 Bootstrap 感到满意，我并不建议你更换。

主要的缺点是 Bootstrap 仍然需要 jQuery 来满足其所有 JavaScript 需求。对很多人来说这没什么问题，但既然我们讨论的是 Vue，那么为了 Bootstrap 的所有交互而加载 jQuery，而应用程序的其他部分却用更现代的 Vue 框架编写，就显得有些可惜了。这只是一个妥协方案，你要么接受它，要么完全放弃使用任何基于 JavaScript 的行为，要么寻找其他替代方案。

语义用户界面

Semantic UI 的目标是提供一种更自然语言化的前端样式设计和交互方式。类名让用户更容易理解和记住要使用的样式，例如，“ui active button”代表 Semantic UI 活动按钮，还有比这更简单的吗？

我不太喜欢他们的文档，安装页面看起来很复杂，安装完成后左边就只剩下一长串页面列表，完全不知道从何入手。我更希望安装完成后能有一个清晰的入门页面，提供一个容器或网格布局，然后是一些常见的初始UI元素，比如标题、段落、按钮等等，但这只是我个人的偏好。

入门

启动新项目的过程比 Bootstrap-vue 稍微复杂一些，因为你需要自己创建项目，并使用 gulp 构建文件，但实际上并没有那么麻烦。Semantic UI 的 npm 安装程序有一个非常友好的问答系统，可以引导你将文件安装到你想要的位置，但我个人更喜欢一个统一的安装程序，它能将所有文件直接安装到 node_modules 文件夹的默认位置。这样与其他所有包保持一致，也方便在不同项目之间使用。保持简洁！

npm install semantic-ui-vue --save
npm install semantic-ui --save

这是你的初始 index.js 文件。

import Vue from 'vue';
import SuiVue from 'semantic-ui-vue';
import '[path-to-semantic]/dist/semantic.min.css';

/* ... */

Vue.use(SuiVue);

new Vue({
    el: '#app-root',
    render: h => h(App)
});

然后就只是

npx parcel

我遇到的问题是，为了监测自定义配置的任何更改，我必须在 semantic 文件夹内运行 `gulp watch` 命令。这使得在项目中使用 Parcel 管理其他部分变得很麻烦。我相信这个问题是可以解决的，可能只是因为我安装 semantic UI 的位置不对，所以你或许会遇到更好的情况。对我来说，这有点让人不爽。我想你可以编写一个 gulp 配置文件来同时监控源代码和 semantic UI 文件，但我不想这么做。

判决

我喜欢它的命名方式，所有东西都用简单的英文名称，用起来感觉更方便。它是一个知名的框架，有很多主题和自定义选项，但远不及 Bootstrap 那么多。至于缺点，需要手动配置 Gulp 或 Parcel，以及它的行为使用了 jQuery，这些都让我倾向于选择其他框架。但如果你不介意这些，并且喜欢更简洁的类名，那么我推荐 Semantic UI。

布尔玛

在我选择比较的三个框架中，Bulma 的知名度最低，但这并不影响我对它的喜爱。我非常喜欢它基于 Flexbox 布局，而且不包含 JavaScript，因此你可以创建一个纯 Vue（或 React）项目。和 Semantic UI 一样，Bulma 也致力于提供更易于记忆的类名和更简洁的使用体验。例如，要使用他们的网格列，你只需要创建一个名为“columns”的 div，其中包含多个“column”的 div，就这么简单。它们会根据列数自动调整大小，这非常棒，也充分展现了 Flexbox 的强大功能。不知为何，他们给一些类名加上了“is”前缀，比如“button is-primary is-large”，这看起来不如 Semantic UI 那么美观，但影响不大。

入门

使用 Buefy 的过程非常简单便捷，而且与 Parcel 配合使用效果也很好。

npm install buefy --save

然后你的 index.js 文件可以这样开头：

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'

Vue.use(Buefy)

new Vue({
    el: '#app',
    render: h => h(App)
});

自定义主题也很简单，只需记住删除上面第三个导入语句，因为它已经在 App.vue 文件中被替换了。由于它是应用的一部分，因此无需单独运行 gulp 或其他任何工具来打包 parcel。

判决

我真的很喜欢 Buefy，它易于设置和使用，但对我来说，主要的缺点是 Buefy 只实现了 Bulmo 的一部分，所以有些代码你需要使用 Buefy 组件，例如：

<b-checkbox>A checkbox!</b-checkbox>

但对于其他元素，你会在 div 元素上使用类，例如

<div class="container">...</div>

我猜是因为他们没有任何 JavaScript 要求，或者项目还没有实现这些要求，但就目前而言，我不太喜欢这两种技术的混合使用，如果能有一套一致的组件可以使用就好了。

全面的

这三个框架对大多数项目来说都是不错的选择，所以最终取决于个人喜好。就我个人而言，我喜欢 Bumla/Buefy 的简洁性，所以我打算试用一下，以后会更新使用体验。

非常感谢您阅读这篇文章！如果您喜欢这篇文章，请留言告诉我您的想法，或者如果您有任何改进建议；也别忘了点击下方的爱心/独角兽/收藏按钮，我将不胜感激！