2018年最应该关注的11个vue.js组件库

根据最近的React库和Angular库的列表发展情况。2018年，这里统计有11个常用的vue.js组件库，它们最有可能出现在你的下一个vue.js应用程序的UI中。

Vue.js, React and Angular NPM 2017下半年下载情况

不同于React和Angular，Vue.js是由Evan You通过人们进行项目资助来维持的一个开源的代码库。你也许会说，这正是为什么Vue.js很牛的一个重要原因，因为它鼓励你“写更高质量的代码和更好的文档内容，超出你通常的期望”。

将近 80k个Stars，并得到Adobe，gitlab等公司的欢迎和使用，Vue受欢迎的程度同样超出预期，似乎仍然在持续增长。

Vue, React and Angular GitHub的统计 2017年12月13日

Vue的成功很大一部分原因在于它的组件。与组件一起工作意味着您可以孤立地考虑每个UI片断，鼓励重用性和模块化，并帮助保持UI一致性。所有Vue组件也就是Vue的实例，然后接受同样的选择对象（除了几个特定的选项外），提供相同的生命周期。

Vue.js组件构建应用程序

组件也可以被共享，如果使用Bit连接工具会像Git那样。而Yarn和npm之间能形成平滑的互动，并可以通过代码库来进行分享。你能找到任何Git存储库中的组件，快速分享他们的变化和组件集合。从那里，组件如需要提取并使用，那可以使用打包工具Yarn/npm然后进一步修改任何库的源代码。

1. Vuetify

有7K以上的Stars，vuetifyjs根据MDL规范提供UI布局。V1.0 Alpha release 版本提供了超过80个可重复使用组件，这些组件都是基于语义的很容易记住，名字属性也设计的简单明了。

2. Vue Material

一个Vue组件库，实现类似谷歌的MDL。有5K的Stars，它提供了适用于所有现代浏览器的内置动态主题和一个明确的目标即尽可能简单的组件API。

3. Keen UI

虽然受UI规范的启发，但Keen-UI并不是真正的MDL标准UI库。有3K的stars，它不是一个CSS框架，不包括表格或排版样式，但使用组件需要JavaScript。

4. Element

有超过21K的Stars！这个广受欢迎的Vue 2工具包为网站提供了丰富的选择——可定制的组件。虽然该文件可能对中国或者采用中文页面的来说更简单用户，这个库就是一个活的生态系统，提供了一个Vue UI库的强大选择。

5. Buefy

buefy提供Vue.js和Bulma组件。在接近2K的stars中，它提供了即插即用的响应方式。虽然组件选择有一定的局限性，但会使您想尝试一下。

6. Bootstrap-Vue

它有3k个Stars，Bootstrap-Vue可以使用Vue.js和Bootstrap 4生成移动优先的响应式界面。可支持vue.js 2.4 +，它带有一个自动WAI-ARIA可达性标记。

7. AT-UI

建立专用的桌面应用程序用户界面，提供npm + webpack + babel支持的前端开发的工作流。这个组件更适合使用英语的界面，它提供了一个适合选择的干净和整齐的UI组件。

8. Fish-UI

Fish-UI是一个基于ES2015和webpack工作的Web工具包。几乎没有任何文档，这个库有多大35个组件的丰富选择，其中有一个比较干净的基本接口和良好的结构。

9. Quasar

有4K以上的Stars，这是个流行的框架。包括几十个vue.js组件，对Web应用程序和移动应用程序的功能提供丰富的选择。组件是作为Web组件编写的，因此它们可以嵌入HTML、CSS和JavaScript代码，您只需在页面和布局模板中包含HTML标记即可使用它们。

10. Muse UI

有5K的Stars，Muse UI是vue.js 2的Material Design UI库。虽然你可能要说只对中文是很友好的，但这些紧密的组件对于那些寻求一个vue.js Material Design UI库的人来说，还是很不错的。

11. Vux

有10K的Stars，Vux的灵感来自移动应用程序WeChat的weui这个广泛流行的组件库。使用它的话注意：文档是中文的，但也提供英文版本。每一个组件都通过文档进行了交互式的呈现，并带有现场的“移动”模拟演示。

组件

每一个组件都可以在Vue项目awesome-vue的components and libraries下发现。为让你的用户界面的一致性，避免重复，避免增加多个库到你的项目，你也可以通过bit来添加使用任何库，也可以快速使用npm/Yarn安装使用单个组件。

无论你选择那个库或设计自己的组件，在2018，vue.js都是你的下一个应用程序的一个强有力的架构竞争者，因为它提供一个易于提取，轻巧而灵活的框架。

汇智网（www.hubwiz.com）小智整理翻译。

分享最新的Vue.js 2 全家桶系列教程：

1.vue.js 入门与提高: http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99

2.vuex 2 入门与提高: http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a

3.vue-router 入门与提高: http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50

4.vue.js 工程化实践: http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9