30个值得关注的Vue开源项目

太过爱你忘了你带给我的痛 2022-03-07 10:14 385阅读 0赞

**译者按：** 学习优秀的开源项目是提高代码水平最有效的方式。

*  原文: [30 Amazing Vue.js Open Source Projects for the Past Year (v.2018)][30 Amazing Vue.js Open Source Projects for the Past Year _v.2018]
 *  译者: [Fundebug][]

**为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。**

在过去的一年中，我比较了近3000个Vue.js开源项目，选出30强（1％的比例）。

这是一个有竞争力的清单，因为我仔细挑选2017年1月至12月期间发布的最佳开源Vue.js库，工具和项目。通过考虑流行度，参与度和近况来评估这份清单的质量。举个简单的例子，这份清单中的项目在某著名同性交友平台的star数平均量高达3795，还不错吧？

开源项目对程序员来说是很有用的。你可以通过读代码并且在现有项目的基础上构建一些东西来学习，因为如果想提高你的Vue开发技术，那么花些时间来玩一下过去一年你可能错过的Vue.js开源项目是很值得的。

### NO.1 ###

**[Element][]**：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库**\[Github star：22004\]**。

![1661416191-5b0df9c6e9a62_articlex][]

### NO.2 ###

**[iView][]**：一套高质量的UI组件库**\[Github star：12175\]**。

![3810189163-5b0df9c6eb105_articlex][]

### NO.3 ###

**[Best-resume-ever][]**：用Vue和LESS简单、快速建立许多漂亮的简历，并创建你最好的简历。**\[Github star：8839\]**。

![102712621-5b0df9c6e9326_articlex][]

### NO.4 ###

**[Vue-element-admin][]**：一个神奇的vue后台管理系统**\[Github star：7942\]**。

![2196918800-5b0df9c6d71f6_articlex][]

### NO.5 ###

**[Vuetify][]**： Vue.js 2的Material组件库**\[Github star：7672\]**。

![3274591247-5b0df9c6a3aae_articlex][]

### NO.6 ###

**[Vue-admin][]**： Vue后台面板管理库，基于Vue 2.0和Bulma 0.3 **\[Github star：7033\]**。

![213729233-5b0df9c6a3bd4_articlex][]

### NO.7 ###

**[vue-hackernews-2.0][]**：vue-router＆vuex和服务器端渲染**\[Github star：6687\]**。

![2008342241-5b0df9c69c68f_articlex][]

### NO.8 ###

**[Vue-devtools (v 4.0)][Vue-devtools _v 4.0]**：用于调试Vue.js应用程序的Chrome devtools扩展程序**\[Github star：6292\]**。

![1659559589-5b0df9c691f34_articlex][]

### NO.9 ###

**[Vue-material][]**：Vue.js的Material design**\[Github star：5230\]**。

![2625142209-5b0df9c688b03_articlex][]

### NO.10 ###

**[Quasar][]**：构建响应式网站，PWA，混合移动应用程序（看起来很原生！）和Electron应用程序，全部同时使用相同的代码库，并基于Vue。**\[Github star：4690\]**。

![2039972362-5b0df9c65253e_articlex][]

[Fundebug][Fundebug 1]错误实时监控为您的Vue项目保驾护航！

### NO.11 ###

**[Electron-vue][]**：Electron＆Vue.js快速启动样板，包括vue-cli脚手架，通用Vue插件， electron-packager/electron-builder，单元/e2e测试，vue-devtools和webpack。**\[Github star：4527\]**。

![3464330311-5b0df9c64642e_articlex][]

### NO.12 ###

**[Vue-loader (v 13)][Vue-loader _v 13]**：Vue.js组件的Webpack加载程序(loader)**\[Github star：2588\]**。

![480603161-5b0df9c6500cc_articlex][]

### NO.13 ###

**[Vuepack (v 3.0)][Vuepack _v 3.0]**：一个使用Vue 2，Vuex，Vue-router和Webpack 2（甚至是Electron）的新潮种子项目。**\[Github star：2077\]**。

![968093761-5b0df9c642ad0_articlex][]

### NO.14 ###

**[Buefy][]**：基于Bulma的Vue.js的轻量级UI组件**\[Github star：1956\]**。

![3873750017-5b0df9c634744_articlex][]

### NO.15 ###

**[Vant][]**：YouZan的Vue.js 2.0移动用户界面**\[Github star：1730\]**。

![4026428766-5b0df9c60d191_articlex][]

### NO.16 ###

**[Codesandbox][]**：专为Web应用程序开发而设计的在线代码编辑器**\[Github star：1552\]**。

![818180553-5b0df9c5f1984_articlex][]

### NO.17 ###

**[Vuefire (v 2.0)][Vuefire _v 2.0]**：Firebase 2＆> = 3的Vue.js 1＆2绑定**\[Github star：1228\]**。

![1978496263-5b0df9c5f2ee3_articlex][]

### NO.18 ###

**[Vue-tetris][]**：使用Vue，Vuex，Immutable做俄罗斯方块**\[Github star：1152\]**。

![2647103914-5b0df9c605801_articlex][]

### NO.19 ###

**[At-ui][]**：一款全新的平面UI套件，专门用于桌面应用程序，由Vue.js 2.0制作而成。**\[Github star：1099\]**。

![1856314481-5b0df9c5e5543_articlex][]

### NO.20 ###

**[Vue-recyclerview][]**：使用vue-recyclerview掌握大型列表**\[Github star：1021\]**。

![823404614-5b0df9c5b1534_articlex][]

### NO.21 ###

**[Vuex-persistedstate (v 2.0)][Vuex-persistedstate _v 2.0]**：用本地存储保持Vuex状态**\[Github star：1009\]**。

![1690177789-5b0df9c59bfda_articlex][]

### NO.22 ###

**[Vue-test-utils][]**：用于测试Vue组件的实用程序**\[Github star：977\]**。

![1881754135-5b0df9c59298b_articlex][]

### NO.23 ###

**[Vue-meta (v 1.0)][Vue-meta _v 1.0]**：管理Vue 2.0组件中的页面元信息，支持SSR +流媒体。**\[Github star：958\]**。

![2250676931-5b0df9c58809f_articlex][]

### NO.24 ###

**[ESLint-plugin-vue][]**：官方ESLint的Vue.js插件**\[Github star：864\]**。

![1338950717-5b0df9c59b931_articlex][]

### NO.25 ###

**[Vue-js-modal][]**：易于使用，高度可定制，移动友好的Vue.js 2.0+ modal**\[Github star：775\]**。

![2952576486-5b0df9c57c4b1_articlex][]

### NO.26 ###

**[Vue-tables-2][]**：Vue.js 2 网格组件**\[Github star：540\]**。

![2708280333-5b0df9c534583_articlex][]

### NO.27 ###

**[Vue-baidu-map][]**：Vue 2.x的百度地图组件**\[Github star：540\]**。

![1254096267-5b0df9c51656a_articlex][]

### NO.28 ###

**[Vuex-loading][]**：Vue / Vuex应用程序的复杂装载程序管理**\[Github star：291\]**。

![1910883640-5b0df9c541cd7_articlex][]

### NO.29 ###

**[Vue-js-grid][]**：一个具有顺畅的排序，拖放和重新排序的Vue.js 2.x响应式网格系统。**\[Github star：248\]**。

![3833248208-5b0df9c54bb31_articlex][]

### NO.30 ###

**[Dockeron][]**：用于Docker的Electron + Vue.js**\[Github star：196\]**。

![2472256157-5b0df9c51ecb4_articlex][]

### 推荐 ###

*  [Fundebug错误监控Vue接入文档][Fundebug_Vue]
 *  [黑科技！Fundebug支持可视化重现出错场景][Fundebug 2]
 *  [Fundebug支持用户行为回溯][Fundebug 3]
 *  [Fundebug发布Vue插件，简化BUG监控接入代码][Fundebug_Vue_BUG]

### 关于Fundebug ###

[Fundebug][Fundebug 4]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家[免费试用][Link 1]！

![3252219156-5bd481e71ea12_articlex][]

转载时请注明作者[Fundebug][Fundebug 4]以及本文地址：  
[https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/][https_blog.fundebug.com_2018_05_29_30-amazing-vuejs-open-source]

[30 Amazing Vue.js Open Source Projects for the Past Year _v.2018]: https://medium.mybridge.co/30-amazing-vue-js-open-source-projects-for-the-past-year-v-2018-d39a0d019bb7
[Fundebug]: https://fundebug.com/
[Element]: https://github.com/ElemeFE/element?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[1661416191-5b0df9c6e9a62_articlex]: /images/20220307/99995765105645a794cd61106d474394.png
[iView]: https://github.com/iview/iview?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[3810189163-5b0df9c6eb105_articlex]: /images/20220307/352cc273787540e4a2d8583117119a88.png
[Best-resume-ever]: https://github.com/salomonelli/best-resume-ever?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[102712621-5b0df9c6e9326_articlex]: /images/20220307/c91286a8fd974d5680c19614eef8f80c.png
[Vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[2196918800-5b0df9c6d71f6_articlex]: /images/20220307/eb8e7171ecbc408a8b009a308459e3a7.png
[Vuetify]: https://github.com/vuetifyjs/vuetify?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[3274591247-5b0df9c6a3aae_articlex]: /images/20220307/ff280dfefb28416390535bbe43462f1b.png
[Vue-admin]: https://github.com/vue-bulma/vue-admin?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[213729233-5b0df9c6a3bd4_articlex]: /images/20220307/c75f7e68b3794be48f44040e4b92e8c6.png
[vue-hackernews-2.0]: https://github.com/vuejs/vue-hackernews-2.0?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[2008342241-5b0df9c69c68f_articlex]: /images/20220307/eb7a9eb2264643a6bd3a2bd746ab62a1.png
[Vue-devtools _v 4.0]: https://github.com/vuejs/vue-devtools?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[1659559589-5b0df9c691f34_articlex]: /images/20220307/1fb17db1399f478497679e0c5acc1fbf.png
[Vue-material]: https://github.com/vuematerial/vue-material?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[2625142209-5b0df9c688b03_articlex]: /images/20220307/dd9b12aa01fe4b58a7cdaeea5c7328c5.png
[Quasar]: https://github.com/quasarframework/quasar?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[2039972362-5b0df9c65253e_articlex]: /images/20220307/b7e00c07c604480593ba2eab9ada1aaa.png
[Fundebug 1]: https://www.fundebug.com
[Electron-vue]: https://github.com/SimulatedGREG/electron-vue?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[3464330311-5b0df9c64642e_articlex]: /images/20220307/74d37baef2c54a07acdb2d0bf23003c5.png
[Vue-loader _v 13]: https://github.com/vuejs/vue-loader?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[480603161-5b0df9c6500cc_articlex]: /images/20220307/078bc3252abf42fd9c17c4e70e3fdec8.png
[Vuepack _v 3.0]: https://github.com/egoist/vuepack?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[968093761-5b0df9c642ad0_articlex]: /images/20220307/e11e44824f964f6f816a427a971ad39e.png
[Buefy]: https://github.com/buefy/buefy?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[3873750017-5b0df9c634744_articlex]: /images/20220307/0c9ad1c29286420fb2edb8e227695cbf.png
[Vant]: https://github.com/youzan/vant?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[4026428766-5b0df9c60d191_articlex]: /images/20220307/56dfff9164b644fc9b2a76d00476c82a.png
[Codesandbox]: https://github.com/CompuIves/codesandbox-client?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[818180553-5b0df9c5f1984_articlex]: /images/20220307/efd24a93df134fbdb0fbf93a931cae1c.png
[Vuefire _v 2.0]: https://github.com/vuejs/vuefire?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[1978496263-5b0df9c5f2ee3_articlex]: /images/20220307/9441f69f134745d4993a145bd8e58b1e.png
[Vue-tetris]: https://github.com/Binaryify/vue-tetris?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[2647103914-5b0df9c605801_articlex]: /images/20220307/2dd34bbe9dd5421bbb2bc76623cef9e3.png
[At-ui]: https://github.com/AT-UI/at-ui?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[1856314481-5b0df9c5e5543_articlex]: /images/20220307/5b5af1fbdd5f4cbdb7b7e808daf1a8f1.png
[Vue-recyclerview]: https://github.com/hilongjw/vue-recyclerview?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[823404614-5b0df9c5b1534_articlex]: /images/20220307/d8a225ec07074fdfa05eb2fa5945440a.png
[Vuex-persistedstate _v 2.0]: https://github.com/robinvdvleuten/vuex-persistedstate?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[1690177789-5b0df9c59bfda_articlex]: /images/20220307/1092b2c69b214e1d95e695eaa2b5e17e.png
[Vue-test-utils]: https://github.com/vuejs/vue-test-utils?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[1881754135-5b0df9c59298b_articlex]: /images/20220307/93d332a7c74846918eef7f81050bbc94.png
[Vue-meta _v 1.0]: https://github.com/declandewet/vue-meta?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[2250676931-5b0df9c58809f_articlex]: /images/20220307/7496189180074191b018c90162a43e3c.png
[ESLint-plugin-vue]: https://github.com/vuejs/eslint-plugin-vue?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[1338950717-5b0df9c59b931_articlex]: /images/20220307/2f6f472835084d3488f7af74a406e601.png
[Vue-js-modal]: https://github.com/euvl/vue-js-modal?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[2952576486-5b0df9c57c4b1_articlex]: /images/20220307/6093492f4f3147d5951747ef790edfce.png
[Vue-tables-2]: https://github.com/matfish2/vue-tables-2?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[2708280333-5b0df9c534583_articlex]: /images/20220307/71e043d3573c4c9594bf6ae83c68f3e9.png
[Vue-baidu-map]: https://github.com/Dafrok/vue-baidu-map?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[1254096267-5b0df9c51656a_articlex]: /images/20220307/d93922c221fc4ae3a91cba01a15a66c3.png
[Vuex-loading]: https://github.com/f/vuex-loading?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[1910883640-5b0df9c541cd7_articlex]: /images/20220307/593e14c8e84146fe87d8427580e7b9c0.png
[Vue-js-grid]: https://github.com/euvl/vue-js-grid?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[3833248208-5b0df9c54bb31_articlex]: /images/20220307/8e2d068af17c46f1a97c88d6dce40d72.png
[Dockeron]: https://github.com/dockeron/dockeron?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
[2472256157-5b0df9c51ecb4_articlex]: /images/20220307/726aa7b79cc84f22ad757a829abc8bad.png
[Fundebug_Vue]: https://docs.fundebug.com/notifier/javascript/framework/vuejs.html
[Fundebug 2]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/
[Fundebug 3]: https://blog.fundebug.com/2017/03/29/user-behavior-track/
[Fundebug_Vue_BUG]: https://blog.fundebug.com/2019/01/17/release-fundebug-vue/
[Fundebug 4]: https://www.fundebug.com/
[Link 1]: https://www.fundebug.com/team/create
[3252219156-5bd481e71ea12_articlex]: /images/20220307/9b8fb842fa634bcbbf921d77dd4cdf2b.png
[https_blog.fundebug.com_2018_05_29_30-amazing-vuejs-open-source]: https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/