![12fa28d51aeea1001effe79aa8ca90b9.png](https://img-blog.csdnimg.cn/img_convert/12fa28d51aeea1001effe79aa8ca90b9.png)
![f03f6a48b98e9b838074250dff1af354.png](https://img-blog.csdnimg.cn/img_convert/f03f6a48b98e9b838074250dff1af354.png)
截至目前Vue在GitHub上的Star数已经高达152601,还有绝大数像笔者一样不经常star别人的Vue友们(可恨可气)。 Vue因其友好程度让更多前端爱好者加入到其中,开源项目对程序员来说是很有用的。你可以通过读代码并且在现有项目的基础上构建一些东西来学习,因为如果想提高你的 Vue 开发技术,那么花些时间来了解开源项目是很值得的。今天推荐10个Vue开源项目,虽然不是最流行的开源项目,star数有的甚至只有两位数,但是实用性还是相对较强的。
Prettier
这是一个代码格式器,支持多种语言,与大多数的编辑器(Atom,Emacs,Visual Studio,Web Storm等)集成,实时更新,可与如JavaScript,CSS,HTML,GraphQL等)一起使用,节省大量花在代码格式化的时间和精力,现已支持.vue文件
网站:https://prettier.io
演示:https://prettier.io/playground/
GitHub:https://github.com/prettier/prettier
GitHub Stars: ★34500
![dc21565fb5f184c153f7262fb695a64d.png](https://img-blog.csdnimg.cn/img_convert/dc21565fb5f184c153f7262fb695a64d.png)
![18dcf52868a1fb1eda8227d66f40aed8.png](https://img-blog.csdnimg.cn/img_convert/18dcf52868a1fb1eda8227d66f40aed8.png)
Vuetify
Vuetify是一个Vue UI库,其中包含精美的手工制作的Material Components.符合Google Material Design准则,结合了Vue.js和Material的所有优点,并且与RTL和Vue cli3兼容,可以通过使用他构建更有交互式且有吸引力的项目。
网站: https://vuetifyjs.com/en/
GitHub: https://github.com/vuetifyjs/vuetify
GitHub Stars: ★22600
![fd4a21c1a7f9cdcca1e96370e584bedf.png](https://img-blog.csdnimg.cn/img_convert/fd4a21c1a7f9cdcca1e96370e584bedf.png)
iView
iView是一套基于Vue.js的高质量UI组件库,可靠文档是其一大优势,用来快速构建web项目,相对友好的API更好的服务于Vue友们,目前已更新到4.0版本
网站: https://iviewui.com/
GitHub: https://github.com/iview/iview
GitHub Stars: ★22777
![4ae2898e77d24fa9430afe411a841c7d.png](https://img-blog.csdnimg.cn/img_convert/4ae2898e77d24fa9430afe411a841c7d.png)
![2a88aa3ab39251f7f796b421c272ba15.png](https://img-blog.csdnimg.cn/img_convert/2a88aa3ab39251f7f796b421c272ba15.png)
CSSFX
这是一个极具匠心的设计,每一个效果都具备流动性、简单性和易用性。让广大Vue友快速使用相关button动效,让web呈现更加丰富。即可应对业务需求,也可自我提升实现。
网站: https://cssfx.dev
GitHub: https://github.com/jolaleye/cssfx
GitHub Stars: ★5224
![87a17687bdafdd590c83edeea211cd25.gif](https://img-blog.csdnimg.cn/img_convert/87a17687bdafdd590c83edeea211cd25.gif)
uiGradients
这是一个CSS实现的线性渐变的效果集合,预览的每一个效果都可以复制源码开箱即用。
网址:https://uigradients.com/
GitHub的:https://github.com/ghosh/uiGradients
GitHub星:★4523
![a106341c289cea66e0445f995e9c42b8.png](https://img-blog.csdnimg.cn/img_convert/a106341c289cea66e0445f995e9c42b8.png)
Handsontable
Handsontable是用于Web应用程序的JavaScript数据网格组件。支持所有的标准操作,增删改查以及过滤排序,可以按需定制。可用于纯JavaScript、React、Vue和Angular。 网站: https://handsontable.com
GitHub: https://github.com/handsontable/handsontable
GitHub Stars: ★12857
![a6be8863d63f38c2ba936e35fb3b03f9.png](https://img-blog.csdnimg.cn/img_convert/a6be8863d63f38c2ba936e35fb3b03f9.png)
SheetJS
SheetJS是一个帮助操作excel文件中存储的数据的JS库,支持每种Excel文件格式,强大的功能还有良好的兼容性。可以在纯web端导出excel或者其他任何的HTML表格,不涉及服务端脚本。全权由前端控制,导数据再也不用看后端哥哥脸色了。
网站: https://sheetjs.com/
演示: https://sheetjs.com/demos
GitHub: https://github.com/SheetJS/js-xlsx
GitHub Stars: ★18691
![48df4cf9f1011aacb37a140d3834e8b6.png](https://img-blog.csdnimg.cn/img_convert/48df4cf9f1011aacb37a140d3834e8b6.png)
![e131f3fd2c5888c1d7e91c434a4b3918.png](https://img-blog.csdnimg.cn/img_convert/e131f3fd2c5888c1d7e91c434a4b3918.png)
Vue Material
Vue的常用Vue UI库之一,简单,轻巧,完全按照Google Material Design规范构建。包含动态主题,按需组件以及所有易于使用的API。
网站: http://vuematerial.io
GitHub: https://github.com/vuematerial/vue-material
GitHub Stars: ★8376
vueOrgChart
纯前端无需安装任何web服务器或数据库,图标可直接在excel或者HTML中编辑,通过学习如何自定义构建设置后,可以自己DIY图表
演示: https://hoogkamer.github.io/vue-org-chart
GitHub: https://github.com/Hoogkamer/vue-org-chart
GitHub Stars: ★78
![d30d934ab599d2d1b9248d7f2a3f93ab.png](https://img-blog.csdnimg.cn/img_convert/d30d934ab599d2d1b9248d7f2a3f93ab.png)
Faviator
这是一个简易的图标生成器,通过自定义配置参数,选择图标格式后,生成对应的JPG、PNG、SVG格式。也可用Google Fonts中选择字体图标,对于小型公司无UI设计情况下,是可以快速解决图标问题的,当然阿里Iconfont也很好用...(无可否认)
网站: https://www.faviator.xyz
演示: https://www.faviator.xyz/playground
GitHub: https://github.com/faviator/faviator
GitHub Stars: ★90
![7d4c81ba03c012b5243ed8ea65ecb31c.png](https://img-blog.csdnimg.cn/img_convert/7d4c81ba03c012b5243ed8ea65ecb31c.png)
如果你觉得这篇内容对你挺有启发,并且还想查看更多前端干货,可以扫码关注我们的微信公众号
![3f373abb2fa85485942d10100ffa481f.png](https://img-blog.csdnimg.cn/img_convert/3f373abb2fa85485942d10100ffa481f.png)