vue项目之Vue开源项目

一、Web 项目

Habitica

Github：https://github.com/HabitRPG/habitica

Habitica 是习惯养成及生产力应用，让你 “游戏人生”。游戏里的奖惩措施能激励你完成任务。Habitica 能够帮助你达成目标，变得健康，勤奋，快乐。Habitica 可以让你如角色扮演游戏般对待你的目标，对待你的生活。当你成功时升级，当你失败时掉血，然后一直不断地赚钱买武器和盔甲。Habitica 前端使用 Vue 编写。

 Reader

Github：https://github.com/hectorqin/reader

Reader 是一个前端基于 Vue.js + Element 的阅读工具。其支持书架管理、搜索、书海、看书、换源、翻页方式、手势支持、自定义主题、自定义样式、WebDAV同步、文字替换过滤、听书、用户配置备份恢复、漫画、音频、书源失效检测、导入本地TXT、EPUB、UMD格式的书籍、书籍分组、RSS订阅、定时更新书架、并发搜书、本地书仓等功能。

Eplee

Github：https://github.com/Janglee123/eplee

Eplee 是一款基于 Vue + Electron 的 ePub 阅读器，专注于通过简单美观的 UI 提供干净、无干扰的阅读体验。

MarkText

Github：https://github.com/marktext/marktext

MarkText 是一个基于 Vue + Electron 的简单而优雅的开源 markdown 编辑器，专注于速度和可用性。

JEECG BOOT

Github：https://github.com/jeecgboot/jeecgboot-vue3

JeecgBoot—Vue3版前端源码，采用 Vue3.0+TypeScript+Vite+Ant-Design-Vue等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。是JeecgBoot低代码平台的vue3技术栈的全新UI版本。

Chatwoot

Github：https://github.com/chatwoot/chatwoot

Chatwoot 是一个开源、自托管的用于即时消息渠道的客户支持工具，可以帮助企业提供客户支持。它是 Intercom、Zendesk、Salesforce Service Cloud 等的开源替代品。Chatwoot 对发生在不同沟通渠道的对话提供了一个综合视图。Chatwoot 的前端使用 Vue 编写。

特点

Chatwoot支持以下对话渠道：

  • 网站：使用我们的实时聊天小部件与您的客户交谈，并使用我们的SDK来识别用户并提供上下文支持。
  • 脸书：连接你的脸书页面，开始回复你页面上的直接消息。
  • Instagram：连接您的Instagram个人资料并开始回复直接消息。
  • 推特：连接你的推特个人资料，回复直接消息或提到你的推文。
  • Telegram：连接您的Telegram机器人，并直接从一个仪表板回复您的客户。
  • WhatsApp：连接你的WhatsApp商业账户，并在Chatwoot中管理对话。
  • Line：连接您的Line帐户并管理Chatwoot中的对话。
  • 短信：连接您的Twilio短信帐户，并在Chatwoot回复短信查询。
  • API通道：使用我们的API通道构建自定义通信通道。
  • 电子邮件：将您的所有电子邮件查询转发到Chatwoot，并在我们的集成仪表板中查看。

 

File browser

Github：https://github.com/filebrowser/filebrowser

filebrowser 是一个使用 Go + Vue 编写的工具，用于在浏览器中对服务器上的文件进行管理。可以是修改文件，或者是添加删除文件，甚至可以分享文件，是一个很棒的文件管理器，可以当成网盘使用。

Slidev

Github：https://github.com/slidevjs/slidev

Slidev 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容，同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在你的演讲稿中内置了互动的演示样例。它使用了功能丰富的Markdown文件来生成精美的幻灯片，具有即时重载的体验。它还拥有很多内置的集成功能，如实时编码、导出 PDF、演讲录制等。Slidev 基于 Vue 3 + Vite + VueUse 等技术实现。

Hoppscotch

Github：https://github.com/hoppscotch/hoppscotch

Hoppscotch 是一种可以通过 Web 服务的方式构建 API 访问的工具，使用 Node.js + Vue 开发，采用简约的 UI 设计，能实时发送和获取响应值，它的的前身是 Postwoman。Hoppscotch 功能与 Postman 类似，不仅支持 HTTP/HTTPS ，而且还支持 WebSocket、Socket.io、EventSourcee、MQTT、GraphQL。

hoppscotch目前支持以下方法：

  • GET -- 请求检索资源信息
  • HEAD -- 检索与GET请求相同的响应头，但没有响应主体。
  • POST -- 服务器在数据库中创建一个新条目。
  • PUT -- 更新现有资源
  • DELETE -- 删除资源或相关组件。
  • CONNECT -- 建立一条通往目标资源识别的服务器的隧道。
  • OPTIONS -- 描述目标资源的通信选项。
  • TRACE -- 沿着通往目标资源的路径执行消息回环测试。
  • PATCH -- 与PUT非常相似，但会对资源进行部分更新。
  • <custom> -- 一些API使用自定义的请求方法，如LIST。键入你的自定义方法。

 

Wiki.js

Github：https://github.com/requarks/wiki

Wiki.js 是一款基于 Node.js + Vue 技术栈的强大、可高度扩展、开源的 Wiki 系统。其界面简洁美观、权限管理灵活，支持多种编辑器、多种用户验证方式、多种备份存储方式、多种搜索引擎，支持国际化、自定义主题、流量分析等，适合做小团队的知识库，适合管理和阅读，支持协同创作。

Vue Material

Github：https://github.com/vuematerial/vue-material

Vue Material 轻便，完全按照Google Material 设计规范建造。Vue Material提供超过56个组件来构建不同类型的布局。它的一个伟大之处在于，材料设计框架有真正彻底的文档。该框架非常轻，具有完全符合谷歌材料设计指南的全系列组件。这种设计适合每一个屏幕，并支持每一个现代浏览器。

路线图、贡献指南、良好的文档和变更日志都在这里。对于喜欢UI项目的开发人员来说，这是一个不错的选择。

Koel

Github：https://github.com/koel/koel

Koel是一款个人音乐流媒体服务，您可以根据自己的需求进行定制。客户端使用Vue编写，后端使用Laravel编写。针对网络开发人员，Koel采用了一些更现代的网络技术——flexbox、音频和拖放API等——来完成其工作。

该项目在Github上非常受欢迎，有52位贡献者。不幸的是，没有详细的投稿指南，但作者在Github上写道，在你提交任何内容之前，你需要打开一个问题。还可以选择通过Opencollective赞助该项目。

我们喜欢这个项目背后的想法，即制作一个由社区开发的流媒体服务。因此，如果你热爱音乐并想发展你的Vue技能，这将是一个很好的选择。

Quasar

Github：https://github.com/quasarframework/quasar

Quasar是一个通用的Vue框架，允许您为具有相同代码库的不同平台编写应用程序：SPAs、PWA、SSR应用程序、混合移动应用程序或多平台桌面应用程序。Quasar有多达81个组件。

这里有一个很棒的文档和一组庞大的组件，设计时考虑到了性能和响应能力。Quasar默认集成了最佳实践（HTML/CSS/JS缩小、缓存破坏、树抖动、源映射、带延迟加载的代码拆分、ES6泄漏、代码linting、可访问性），因此您可以主要关注应用程序的功能。它还提供了一个CLI工具，可以轻松地构建新项目。

该框架有一个很棒的社区，支持聊天和论坛，显然还有一个贡献指南。此外，您可以通过向他们捐款来支持该工具。

Bootstrap Vue

Github：https://github.com/bootstrap-vue/bootstrap-vue

Bootstrap Vue是一个基于引导程序库的UI工具包。它只是用Vue代码替换了常规引导程序组件中的JavaScript。使用Bootstrap Vue，您可以使用Vue.js和世界上最流行的前端CSS库Bootstrap v4在网络上构建响应迅速、移动优先且可访问ARIA的项目。它还可以轻松地与Nuxt.js集成。

文档内容广泛，加上Discord提供的强大社区支持，使其成为与某人一起启动项目并为其做出贡献的安全选择。

VeeValidate

Github：https://github.com/logaretm/vee-validate

eeValidate是Vue.js的一个基于模板的验证框架，允许您验证输入和显示错误。

由于它是基于模板的，您只需要为每个输入指定在值更改时应该使用哪种验证器。这些错误将在支持40多种语言环境的情况下自动生成。许多规则都是现成的。

特点：

  • 基于模板的验证，既熟悉又易于设置；
  • i18n 40多个地区的支持和错误消息；
  • 异步和自定义规则支持；
  • 用铅字书写的；
  • 没有依赖关系。
  • VeeValidate解决了表单验证的主要痛点，并以最灵活的方式解决了这些痛点：
  • 能够为用户打造复杂的用户体验；
  • 大多数常见的验证都是内置的；

跨领域验证；

  • 实用程序，以增强您的窗体的可访问性和样式；
  • 本地化是内置于核心的。
  • 该团队欢迎每个人为项目做出贡献，并提供了良好的文档和贡献指南。它也有几个伟大的例子和伟大的社区。

 

gin-vue-admin

⏰ 如果后台选择的是go语言，可以考虑这一款。

gin-vue-admin（github上的标星数为14.2k）基于 vite + vue3 + gin 搭建的开发基础平台（支持TS，JS 混用），集成 jwt鉴权，权限管理，动态路由，显隐可控组件，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器等开发必备功能。

技术选型:

  • 前端：用基于 Vue 的 Element 构建基础页面。
  • 后端：用 Gin 快速搭建基础 restful风格API，Gin 是一个go语言编写的Web框架。
  • 数据库：采用 MySql>5.7 版本，数据库引擎 innoDB，使用 gorm 实现对数据库的基本操作，已添加对sqlite数据库的支持。
  • 缓存：使用Redis实现记录当前活跃用户的jwt令牌并实现多点登录限制。
  • API文档：使用Swagger构建自动化文档。
  • 配置文件：使用 fsnotify 和 viper 实现yaml格式的配置文件。
  • 日志：使用 zap 实现日志记录。

主要功能:

  • 权限管理：基于jwt和casbin实现的权限管理
  • 用户管理：系统管理员分配用户角色和角色权限。
  • 角色管理：创建权限控制的主要对象，可以给角色分配不同api权限和菜单权限。
  • 菜单管理：实现用户动态菜单配置，实现不同角色不同菜单。
  • api管理：不同用户可调用的api接口的权限不同。
  • 富文本编辑器：MarkDown编辑器功能嵌入。
  • restful示例：可以参考用户管理模块中的示例API。
  • 多点登录限制：需要在config.yaml中把system中的useMultipoint修改为true(需要自行配置Redis和Config中的Redis参数，测试阶段，有bug请及时反馈)。
  • 表单生成器：表单生成器借助 @form-generator。
  • 代码生成器：后台基础逻辑以及简单curd的代码生成器等。

预览效果:

vue-vben-admin

Vue-Vben-Admin（github上的标星数为13.5k）是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。

特点:

  • 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发
  • TypeScript: 应用程序级 JavaScript 的语言
  • 主题：可配置的主题
  • 国际化：内置完善的国际化方案
  • Mock 数据 内置 Mock 数据方案
  • 权限 内置完善的动态路由权限生成方案
  • 组件 二次封装了多个常用的组件

预览效果:

vue-admin-better

原 vue-admin-beauteful 。

vue-admin-better（github上的标星数为7.2k 12.8k）主线版本基于 element-plus、element-ui、ant-design-vue 三者并行开发维护，同时支持电脑，手机，平板。

相关地址:

特性：

  • 💪 40+高质量单页
  • 💅 RBAC 模型 + JWT 权限控制
  • 🌍 10 万+ 项目实际应用
  • 👏 良好的类型定义
  • 🥳 开源版本支持免费商用
  • 🚀 跨平台 PC、手机端、平板
  • 📦️ 后端路由动态渲染

预览效果：

vue-pure-admin

vue-pure-admin（github上的标星数为3.4k）是一个免费开源的中后台模版。使用了最新的 Vue 3、Vite2、Element Plus 、TypeScript、等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。

相关地址:

精简版 是基于vue-pure-admin提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小仅 3MB。 Tauri 版 比electron更强（tauri 与 electron 的对比），如果没有安装tauri，请阅读 tauri官方文档。

本地开发推荐使用 Chrome 80+ 浏览器（不要用360、QQ等国内厂商浏览器，懂得都懂），支持现代浏览器，不支持 IE。

预览效果:

    

naive-ui-admin

Naive Ui Admin（github上的标星数为2.8k）是一个基于 Vue3.0、Vite、 Naive UI、TypeScript 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目。

特性:

  • 二次封装实用高扩展性组件
  • 响应式、多主题，多配置，快速集成，开箱即用
  • 最新技术栈，使用Vue3、Typescript、Pinia、Vite等前端前沿技术
  • 强大的鉴权系统，对路由、菜单、功能点等支持三种鉴权模式，满足不同的业务鉴权需求
  • 持续更新，实用性页面模板功能和交互，随意搭配组合，让构建页面变得简单化

预览效果:

Geeker-Admin

Geeker-Admin（github上的标星数为2.1k）基于 Vue3.2、Vite2、TypeScript、Pinia、Element Plus 开源的一套后台管理模板。

预览效果:

 

vue3-antd-admin

vue3-antd-admin（github上的标星数为2k）基于vue-cli5.x/vite2.x + vue3.x + ant-design-vue3.x + typescript hooks 的基础后台管理系统模板。 集成RBAC的权限系统，JSON Schema动态表单，动态表格，漂亮锁屏界面等。

预览效果:

vue3-composition-admin

项目的基础版本出自于源于 花裤衩 大佬的 vue-element-admin。

vue3-composition-admin（github上的标星数为1.9k）是一个后台前端解决方案，它基于 vue, typescript 和 element-ui 实现，项目都是以composition api风格编写。

本项目使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级后台产品原型。

预览效果"

soybean-admin

Soybean Admin（github上的标星数为1.3k）是一个基于 Vue 3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于 mock 实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。

特点:

  • 最新技术栈：使用 Vue3/Vite3 等前端前沿技术开发，使用高效率的 npm 包管理器 pnpm
  • TypeScript：应用程序级 JavaScript 的语言
  • 主题：丰富可配置的主题、暗黑模式，基于原子 css 框架 - UnoCSS 的动态主题颜色
  • 代码规范：丰富的规范插件及极高的代码规范
  • 权限路由：简易的路由配置、基于 mock 的动态路由能快速实现后端动态路由
  • 请求函数：基于 axios 的完善的请求函数封装，提供 Promise 和 hooks 两种请求函数，加入请求结果数据转换的适配器

预览效果:

vue-admin-box

vue-admin-box（github上的标星数为929）是一个免费并且开源的中后台管理系统模板。使用最新版本的 vue3 + vite + element-plus 开发而成，目的是为了解决通用型的业务中后台系统复杂的配置。

特点:

  • 适合中后台开发的路由配置、状态管理机制（状态默认支持本地存储）、已封装完善的axios及api管理机制
  • 极方便扩展的主题配置功能，默认支持三种典型的中后台风格
  • 简易配置的页面缓存功能，只需配置noCache属性，无需配置其他的任何属性，如组件名称，路由名称等等很多框架需要配置的东西
  • 典型增删改查的三种业务表格，详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格”
  • 无路由跳转的刷新功能，支持缓存页面刷新，目前了解的多数框架都不支持缓存页面的刷新
  • 方便扩展的国际化解决方案，并提供了两套非国际化的基础模板和两套国际化的基础模板（ts版本/js版本）
  • 手写版本的各类自定义指令
  • 已经过多个中后台业务检验过的表格公用组件及弹窗公用组件，详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格”

预览效果"

fantastic-admin

Fantastic-admin是一款开箱即用的 Vue 中后台管理系统框架。有 vue2（现已停止维护）和 vue3 的版本。

特点:

  • 丰富的布局与主题，覆盖市面上各种中后台应用场景，兼容PC、平板和移动端
  • 提供系统配置文件，轻松实现个性化定制
  • 精心设计的动效，让每一处的动画都干净利落
  • 根据路由配置自动生成导航栏
  • 基于文件系统的路由
  • 支持全方位权限验证
  • 内置多级路由最佳缓存方案
  • 轻松实现国际化多语言适配
  • 提供接近于浏览器原生标签栏操作体验的标签页功能

基础版预览效果：

专业版预览效果：

专业版与基础版区别:

⭐功能与服务⭐基础版专业版
长期维护更新，提供新特性 ✔️ ✔️
定期修复 bug ✔️ ✔️
开发与构建工具 Vue 3 / Vite 3 Vue 3 / Vite 3
UI 组件库 Element Plus Element Plus
页面布局 3 套 20 套
主题风格 明亮 1 款 / 暗黑 1 款 明亮 6 款 / 暗黑 6 款
导航路由配置项 8 个 17 个
外链导航 ✔️ ✔️
内嵌导航 ❌ ✔️
Tab 标签栏 ❌ ✔️
全方位权限验证 ✔️ ✔️
扩展组件 12 个 20 个
国际化 ❌ ✔️
Mock 数据 ✔️ ✔️
错误日志上报 ❌ ✔️
文件自动生成 支持部分 ✔️
业务应用静态页面 ❌ ✔️
团队代码规范 ✔️ ✔️
框架版权信息 需保留 可删除

vue-next-admin

Gitee 上面的 stars 为 3.6k。

基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。

效果预览:

二、移动端项目

NeteaseCloudWebApp

Github：github.com/javaSwing/N…

NeteaseCloudWebApp 这是一个用VUEJS写高仿网易云音乐的webapp，只实现了APP的核心功能，这个项目会长期进行更新。

技术栈：

  • 传说中的VUE全家桶(vue vue-router vuex)
  • axios
  • Muse-UI(一个基于Vue2.x的material design 风格UI框架)

vue-cli

Github：github.com/Wscats/vue-…

vue-cli 基于 Vue3.0 Composition Api 快速构建实战项目

movie-trailer

Github：github.com/lhz960904/m…

movie-trailer 基于Vue全家桶开发的电影预告片webAPP，可以查看正在热映与即将上映的电影信息和短片。

newbee-mall-vue3-app

Github：github.com/newbee-ltd/…

newbee-mall 项目是一套电商系统，包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统，基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。

vue3-jd-h5

Github：github.com/GitHubGanKa…

vue3-jd-h5是一个电商 H5 页面前端项目，基于Vue 3.0.0 + Vant 3.0.0 实现，主要包括首页、分类页面、我的页面、购物车等。

vue2-elm

Github：github.com/bailicangdu…

vue2-elm 是一个基于 vue2 + vuex 构建一个具有 45 个页面的仿饿了么的大型单页面应用，涉及注册、登录、商品展示、购物车、下单等，是一个完整的流程。

Easy.Template

Github：https://github.com/easy-temps

EasyTemplate 是一个基于 Vue 3 生态系统的开源模板组织，旨在构建开箱即用的移动、中后台模板，帮助你快速完成业务开发。所有模板全部采用 ECMAScript 模块（ESM）规范来编写和组织代码，使用了最新的 Vue3、Vite5、TypeScript、Pinia、Unocss 等主流技术开发，其中每个模板因使用场景不同，也有各自的生态

 

 


 

 


posted on 2024-07-20 00:49  梁飞宇  阅读(286)  评论(0)    收藏  举报