文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > Vue.js > 正文

推荐 20 个近期比较“火热”的Vue项目（值得收藏）

青灯夜游
发布： 2022-01-05 19:29:58
转载
31296人浏览过

本篇文章给大家分享20 个近期比较“火热”的vue项目给前端工友，收藏等于学会，希望对大家有所帮助。

推荐 20 个近期比较“火热”的Vue项目（值得收藏）

我们知道，现在在面试时，如果在 github 或 其他开源网站上贡献过开源项目，往往能加分不少

我最近也比较关注Vue相关的开源项目，收集了一些最近还算比较“火热”的Vue项目，也给大家推荐推荐，快一起来看看吧！【相关推荐：vue.js教程】

注：排名不分先后

立即学习“前端免费学习笔记（深入）”；

1. vue-admin-better

目前Stars：11066

本月斩获Stars：300

是一个后台管理系统，开源版本支持免费商用，有40多个单页，RBAC 模型 + JWT 权限控制，良好的类型定义，跨平台 PC、手机端、平板，后端路由动态渲染

组件库，Vue2使用的是element-ui，Vue3有使用element-plus和ant-design-vue，适合正在以及想使用Vue + element-ui/element-plus/ant-design-vue 开发的伙伴

GitHub地址：https://github.com/chuzhixin/vue-admin-better

1.png

2. element-plus

目前Stars：13178

本月斩获Stars：505

一个Vue3的UI组件库；知道Vue的应该都是知道element，element-plus就是element的Vue3版本

如果你对TS和Vue3感兴趣，记得去看看哦

GitHub地址：https://github.com/element-plus/element-plus

文档地址：https://element-plus.gitee.io/zh-CN/

2.png

3. ant-design-vue

目前Stars：15818

本月斩获Stars：224

ant-design-vue和element-plus一样，算是比较知名的比较老的组件库一直延续下来的，也是尤雨溪多次推荐的组件库之一，它是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步，组件的 html 结构和 css 样式也保持一致，真正做到了样式 0 修改，组件 API 也尽量保持了一致，支持服务端渲染

GitHub地址：https://github.com/vueComponent/ant-design-vue/

3.png

文档地址：https://next.antdv.com/docs/vue/introduce-cn/

3-1.png

4. naive-ui-admin

目前Stars：1421

本月斩获Stars：360

类似vue-admin-better，naive-ui-admin是一个基于 vue3+vite2+TS 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目

是一个新的开源项目，如果你对 vue3、vite2和TS最新技术感兴趣，可以去试试

GitHub地址：https://github.com/jekip/naive-ui-admin

预览地址：https://naive-ui-admin.vercel.app/

4.png

4-2.png

5. eladmin-web

目前Stars：3445

本月斩获Stars：82

eladmin的前端源码，该项目基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 Spring Security、Redis、Vue的前后端分离后台管理系统， 权限控制采用 RBAC，菜单动态路由

eladmin项目的官方文档地址：https://el-admin.vip/

5.png

6. element

目前Stars：51464

本月斩获Stars：229

不用多说，一个Vue2知名的UI组件库

GitHub地址：https://github.com/ElemeFE/element

官方文档：https://element.eleme.cn/#/zh-CN

6.png

7. homer

目前Stars：3594

本月斩获Stars：329

一个简单的静态网站首页生成器,通过简单的 yaml 配置文件就能实现

GitHub地址：https://github.com/bastienwirtz/homer

7.png

8. uView2.0

目前Stars：233

本月斩获Stars：142

uView2.0是多平台快速开发的UI框架，全面兼容nvue，原生渲染，兼容安卓、iOS、微信小程序、H5、QQ小程序、百度小程序、支付宝小程序、头条小程序

GitHub地址：https://github.com/umicro/uView2.0

官方文档：https://uviewui.com

8.png

9. vue-vben-admin

目前Stars：8200

本月斩获Stars：513

官方以快著称，其实就是基于Vue3+vite2+TS

GitHub地址：https://github.com/anncwb/vue-vben-admin

9.png

预览地址：https://vvbin.cn/next/

9-2.png

10. vue3-composition-admin

目前Stars：1063

本月斩获Stars：93

vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写

想了解Vue3 composition api的深入使用的，可以去看看

GitHub地址：https://github.com/RainManGO/vue3-composition-admin

在线demo演示地址：https://admin-tmpl-test.rencaiyoujia.cn/

10.png

11. vue-element-admin

目前Stars：73242

本月斩获Stars：755

上一个项目vue3-composition-admin就是基于这个vue-element-admin项目实现

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

在线demo演示地址：https://panjiachen.github.io/vue-element-admin/#/dashboard

11.png

12. vue3-antd-admin

目前Stars：1166

本月斩获Stars：144

是一个基于vue-cli5.x/vite2.x + vue3.x + ant-design-vue3.x + typescript hooks 的基础后台管理系统模板 RBAC的权限系统, JSON Schema动态表单,动态表格,漂亮锁屏界面

GitHub地址：https://github.com/buqiyuan/vue3-antd-admin

预览地址：http://buqiyuan.gitee.io/vue3-antd-admin/

12.png

13. form-generator

目前Stars：5585

本月斩获Stars：214

一个Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单

GitHub地址：https://github.com/JakHuang/form-generator

预览地址：https://mrhj.gitee.io/form-generator/#/

13.png

14. varlet

目前Stars：1682

本月斩获Stars：298

好像前几天还看到作者在掘金发文字，是一个基于Vue3的Material design风格移动端组件库，尤雨溪提到过

GitHub地址：https://github.com/haoziqaq/varlet

文档地址：https://varlet.gitee.io/varlet-ui/#/zh-CN/home

14.png

15. sub-web

目前Stars：1670

本月斩获Stars：141

基于vue-cli与 tindy2013/subconverter后端实现的配置自动生成

GitHub地址：https://github.com/CareyWang/sub-web

展示地址：https://sub-web.netlify.app/

15.png

16.  vue2-manage

目前Stars：11375

本月斩获Stars：103

此项目是 vue2 + element-ui 构建的后台管理系统，是后台项目node-elm 的管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登陆、管理数据、权限验证等功能

GitHub地址：https://github.com/bailicangdu/vue2-manage

展示地址：https://cangdu.org/manage/#/

16.png

17. vue-pure-admin

目前Stars：1675

本月斩获Stars：194

vue-pure-admin 是一个免费开源的中后台模版，使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，附有配套视频、文档和UI设计

GitHub地址：https://github.com/xiaoxian521/vue-pure-admin

预览地址：http://yiming_chang.gitee.io/manages

17.png

18. vuejs / docs

目前Stars：1492

本月斩获Stars：64

是Vue3的核心文档

GitHub地址：https://github.com/vuejs/docs

官网：https://v3.vuejs.org/

18.png

19. PicGo

目前Stars：15480

本月斩获Stars：422

一个用于快速上传图片并获取图片 URL 链接的工具，这个应该也不陌生

GitHub地址：https://github.com/Molunerfinn/PicGo

文档地址：https://picgo.github.io/PicGo-Doc/zh/guide/

19.png

官网：https://molunerfinn.com/PicGo/

19-2.png

20. daisyui

目前Stars：6913

本月斩获Stars：518

daisyUI可能比较陌生，它是Tailwind CSS的Components，Tailwind CSS实际上是一个通过以token list 语法（HTML class）承载的 DSL，用来书写等价于 CSS/Sass/Less 的样式声明

GitHub地址：https://github.com/saadeghi/daisyui

文档地址：https://daisyui.com/

官网地址：https://daisyui.com/

20.png

THE END

更多编程相关知识，请访问：编程视频！！

以上就是推荐 20 个近期比较“火热”的Vue项目（值得收藏）的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
相关标签：
vue
来源：掘金社区网
收藏 点赞
上一篇：带你深入了解vue2中的 v-model，看看如何让组件支持该语法 下一篇：Vue实例要怎么挂载？聊聊实例挂载的过程
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Vue的响应式系统是如何追踪依赖的？ Vue的响应式系统通过依赖追踪实现自动更新视图。1.数据劫持：Vue2使用Object.defineProperty，Vue3使用Proxy，使数据在被访问或修改时可被观测；2.依赖收集：当数据被读取时，如在模板中使用{{message}}，当前watcher会被记录到该数据的依赖列表中；3.派发更新：数据变化时触发setter或Proxy的set，通知所有依赖的watcher异步批量更新。此外，数组需用变异方法更新，新增属性需用Vue.set，深层响应则通过递归实现。掌握这三步机制，便能理解V
2025-06-12 11:15:01
874
Vue的v-once指令对性能有什么影响？ v-once在Vue中的作用是让元素或组件只渲染一次，后续数据变化不会触发重新渲染。适合用于静态内容如帮助文档、固定标题等初始化后不再改变的场景，减少diff对比开销；适用于一次性展示的配置项、常量信息等静态数据绑定；但优化效果仅在大量静态内容存在时才明显。使用时需注意避免滥用，防止数据变更不生效、与响应式系统冲突以及增加调试成本；建议仅在明确内容不变时使用，例如用户注册时间展示，而动态内容如昵称则不应使用。
2025-06-11 10:06:02
403
Vue的errorCaptured钩子如何捕获子组件错误？ Vue的errorCaptured钩子可以捕获子组件的错误，并在父组件中统一处理。1.它能捕获渲染函数、生命周期钩子和watcher中的同步错误；2.不会捕获异步错误、Promiserejection和父组件自身的错误；3.错误会从最近祖先逐级向上冒泡，返回false可阻止传播；4.建议结合Vue.config.errorHandler实现全局错误兜底处理，从而构建完整的前端错误监控体系。
2025-06-10 08:48:02
279
Vue中的nextTick方法有什么具体作用？ nextTick的核心作用是在下一次DOM更新完成后执行指定的回调函数，确保数据变化已反映到视图上。常见使用场景包括：1.获取更新后的DOM尺寸；2.手动设置输入框焦点；3.触发动画或第三方插件。使用方式有两种：一是传入回调函数，如this.$nextTick(()=>{});二是配合Promise使用async/await。例如新增列表项后滚动到底部需用nextTick确保DOM已更新。注意事项包括避免滥用、可在生命周期钩子中使用、与setTimeout不同之处在于执行时机更精准，且多个nex
2025-06-09 10:27:05
940
怎样通过实践项目巩固Vue.js知识 巩固Vue.js知识的最佳方法是通过实际项目进行实践。1.通过项目将理论转化为实际操作，发现学习中的细节和问题。2.面对实际问题，如组件性能优化、状态管理、路由管理，深入理解核心概念。3.使用Vuex管理状态，学习模块化技巧提高代码可维护性。4.选择合适的工具，如VueRouter、ElementUI，根据项目需求学习成长。5.解决组件通信问题，使用provide/inject特性增强灵活性。6.优化性能，理解虚拟DOM和diff算法，使用v-if/v-show提升渲染效率。通过项目实践，你能巩
2025-06-08 08:45:01
513
如何利用文档深入学习Vue.js 要深入学习Vue.js，应从官方文档入手。1)通读“指南”部分，掌握核心概念和基础知识。2)深入研究“API”部分，结合示例代码实践常用API。3)利用“Cookbook”解决常见需求。4)积极参与“社区”讨论，解决疑难杂症并了解最新动态。5)学习性能优化和最佳实践，提升代码质量。
2025-06-07 09:21:01
873
Vue组件间如何通信？props和$emit怎么用？ 在Vue开发中，组件通信的基础方式是父组件通过props向下传递数据，子组件通过$emit向上传递事件。一、父组件通过定义props属性向子组件传值，子组件显式声明props类型并接收数据；二、子组件使用this.$emit触发事件通知父组件修改数据，父组件监听事件并执行对应方法处理；三、兄弟组件通信可通过共同父组件中转实现，即一个子组件通过$emit通知父组件，父组件再通过props传递给另一个子组件；四、常见注意事项包括设置props默认值、使用冒号绑定变量以及统一事件命名规范等，合理使用这
2025-06-06 08:21:01
594
怎样优化Vue.js项目的首屏加载速度 优化Vue.js项目首屏加载速度可以通过以下三种方法：1.代码分割：使用webpack按需加载组件，减少首屏加载时间。2.静态资源优化：压缩并转化为base64编码的图片，提升加载速度。3.服务端渲染（SSR）：在服务器端渲染首屏内容，显著降低加载时间。
2025-06-05 13:24:01
1000
如何用Vue.js开发一个健身打卡应用 用Vue.js开发健身打卡应用是可行的。1)使用VueCLI创建项目。2)通过Vuex管理用户数据和锻炼日志。3)设计用户界面，使用组件系统构建。4)注意用户认证、数据持久化、性能优化和社交功能的实现。
2025-06-04 10:39:01
831
Vue的过渡动画如何实现？transition组件怎么用？ Vue的过渡动画通过transition组件实现，用于元素插入、更新或移除时添加效果。一、transition包裹单个元素，如包裹一个DOM元素，通过v-if控制显示隐藏，Vue会自动添加.fade-enter-active和.fade-leave-active等类名控制过渡；二、transition-group处理列表动画，需配合v-for使用，每个子元素必须有key属性，并可通过tag指定渲染的标签；三、JavaScript钩子可精细控制动画逻辑，如@before-enter、@enter、
2025-06-03 09:12:02
379
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部