🌿非常火的前端开源项目🌵

1,081 阅读12分钟

其他合集链接

分享几个超级棒的🐯谷歌浏览器插件🐯

分享配置🐹掘金动态头像🐹,内有大量的动图特效

分享几款超级棒的☘️VS Code插件☘️,提升你的工作效率

🌜分享一些自己常用的前端常用工具网站🌛

分享几个🏵️前端知识和面试网站🏵️

🐲总有一个可以提升你工作效率的vite插件🐲

Vue

Leafer Design

Vue3 TypeScript Vite4

⚡️ 在线预览 | 🔥 备用预览地址 | 🔗 源码地址

Leafer Design 是一个免费开源的海报设计器。使用了最新的vue3,vite4,TypeScript等主流技术开发,开箱即用。

一款漂亮易用的在线设计器,支持PSD导入、PSD解析,可用于海报设计器、广告设计器、logo设计器、AI创作图片合成器等。常用于生成二维码海报,图片海报,二维码推广海报,图片处理,名片设计,电商产品图,节假日海报等。

687474703a2f2f6f73732e67756f7a696d692e636e2f677a6d2d64657369676e2f636f766572312e706e67 (1).png

功能/计划

截止2024-4-20

Tips: 🕙筹划中 🔲筹备中 🚧进行中 ✅已完成

  • ✅ PSD导入

    • ✅ 支持RGB色彩模式的PSD文件导入

    • 🕙 支持CMYK色彩模式的PSD文件导入及色彩模式转换

    • ✅ 分组处理

    • ✅ 层级处理

    • ✅ 图片解析

    • ✅ 剪切蒙版

      • ✅ 单层蒙版
      • 🔲 连续多层蒙版
    • ✅ 文字解析

      • ✅ 普通文本
      • ✅ 富文本
      • 🚧 效果/特效处理
    • ✅ 字体加载

    • 🕙 智能对象

  • ✅ JSON导入

  • ✅ 多页面支持

  • ✅ 快捷键支持(部分功能)

  • ✅ 模板导入

  • ✅ 图层管理

  • ✅ 标尺工具

  • ✅ 钢笔工具

    • ✅ 默认画笔样式
    • 🚧 自定义画笔样式
  • ✅ 元素编辑

  • ✅ 预览

  • ✅ 文件下载(JSON / PNG / JPG / WEBP)

    • ✅ 整个画布导出
    • ✅ 指定元素导出
  • ✅ 画布缩放、拖动模式

  • ✅ 边框描边(纯色、线性渐变、径向渐变、图片)

  • ✅ 填充(纯色、线性渐变、径向渐变、图片)

  • ✅ 混合模式、旋转、透明度

  • ✅ 文本字体、粗细、大小、下划线、中划线、倾斜、行距、字距、内边距、换行规则

  • ✅ 文本超出控制、自定义超出显示

  • ✅ 多元素打组、拆分组

  • ✅ 画布尺寸修改、多背景填充

  • ✅ 元素超出组裁剪/显示

  • ✅ 富文本支持

  • ✅ 组内放置(拖入)

  • ✅ 遮罩功能

  • ✅ 组内蒙版

  • ✅ 组内擦除功能

  • ✅ 外阴影、内阴影

  • ✅ 撤销、恢复功能

  • 🔲 图片裁剪

  • 🔲 图片滤镜

  • 🕙 SDK封装

  • 🚧 PSD导入插件化封装

  • 🕙 针对标尺线、元素的自动吸附功能

  • ✅ 二维码工具

  • ✅ 条形码码工具

  • 🕙 AI抠图

  • 🕙 AI图生图、自动补全

  • ✅ 标尺线npm包封装

双十一数据大屏

Vue3 typescript vite echarts

文档地址:vue3 + ts + svg + ECharts 实现双十一数据大屏

项目 git 仓库:githubgitee

640 (5).webp

办公系统

Vue3 typescript vite Ant Design Vben Admin echarts pinia vue-i18n

🔗 源码地址

基于Springboot+Vue3 的 OA 协同办公系统。拥有成熟的OA系统功能,自带低代码开发平台,可以快速搭建工作流、人事管理、CRM、办公用品、项目管理等功能,让您可以快速上手、快速实施、快速交付。技术栈:

  • 后端框架:spring boot + mybatis plus + redis + Druid + ActiveMQ/RocketMQ
  • 前端框架:Vue3 + Ant Design + Vben Admin

desktop.png

智慧团购

全栈 Vue.js vuex TypeScript

⚡️ 在线预览 | 🔗 源码地址

一款基于Spring Cloud和Vue.js的社区团购配送系统,经过真实的用户检验且完善的社区团购配送系统,社区团购配送系统包含管理台、集团总店(商家PC端)、城市合伙人、区域团长后台、用户端小程序等操作模块的社区团购和物流配送系统。

640 (1).webp

e家宜业

全栈 vue2 vuex echarts

📖 阅读文档 | [🔗 源码地址

「e家宜业」是一整套基于AGPL开源协议开源的智慧物业解决方案。实现了微信公众号、小程序、PC、H5、智能硬件多端打通,旨在提升物业公司效率、规范物业服务流程、提升物业服务满意度、加强小区智慧化建设、便捷业主服务。 后端采用Koa + Typescript轻量级构建,支持分布式部署;前端使用vue + view-design开发。

640 (3).webp

640 (4).webp

React

light chaser(大屏)

react18 mobx typescript vite5

📱 在线预览 | 📖 阅读文档| 🔗 源码地址

light chaser 是一款开源免费的数据可视化设计工具,基于 React 技术栈实现。通过它,你可以简单快速地制作数据可视化相关内容。它可用于大屏幕数据 可视化展示、数据报告、数据分析等场景。

这个项目包含:

  • 一个标准的组件编辑面板
  • 一个用于事件交互的蓝图编辑器
  • 丰富的组件、快捷键和扩展能力

68747470733a2f2f692e3037323333332e78797a2f66696c652f3866663833363138313732313666326662316334372e706e67.png

68747470733a2f2f692e3037323333332e78797a2f66696c652f3363616361616139656463363430636536343533362e706e67.png

跨端

unibest

uniapp Vue3 TypeScript Vite4 UnoCss pinia

📱 在线预览 | 📖 阅读文档| 🔗 源码地址

unibest - 最好的 uniapp 跨端解决方案

Snipaste_2024-04-20_09-25-43.jpg Snipaste_2024-04-20_09-33-28.jpg

`unibest` 是一个 uniapp 跨端解决方案,由 `uniapp` + `Vue3` + `Ts` + `Vite4` + `UnoCss` + `VSCode`(可选 `webstorm`) 实现。它使用了最新的前端技术栈,无需依靠 `HBuilderX`,通过命令行方式运行 `web`、`小程序` 和 `App`。

unibest 内置了 约定式路由layout布局请求封装请求拦截登录拦截UnoCSSi18n多语言 等基础功能,提供了 代码提示自动格式化统一配置代码片段 等辅助功能,让你编写 uniapp 拥有 best 体验 ( unibest 的由来)。

✨ 特性

  • ⚡️ Vue 3, Vite, pnpm, esbuild - 就是快!
  • 🔥 最新语法 - <script lang="ts" setup> 语法
  • 🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
  • 😃 UnoCSS Icons & icones - 海量图标供你选择
  • 🍍 pinia & pinia-plugin-persistedstate - 全端适配的全局数据管理
  • 🗂 uni.request 请求封装 - 一键引入,快捷使用
  • 📦 组件自动化加载 - 可配置化的组件加载方式,轻松加载组件
  • 📥 API 自动加载 - 直接使用 Composition API 无需引入
  • 🎉 v3 Code Snippets 加快你的页面生成
  • 🦾 TypeScript & ESLint & stylelint - 保证代码质量
  • 🌈 husky & lint-staged + commitlint - 保证代码提交质量
  • 💡 ES6 import 自动排序,css 属性 自动排序,增强编码一致性
  • 🖥 多环境 配置分开,想则怎么配置就怎么配置

varlet-app-template

Vue3 Varlet Vite Typescript

📱 在线预览 | 📖 阅读文档| 🔗 源码地址

varlet-app-template 是一个开箱即用的轻量化移动端 Web 模板,基于 Vue3VarletViteTypescript 开发。

特性

  • ⚡️ 基于 Vue3VarletViteTypescript 开发
  • 📦 内置组件库和常用第三方库的自动引入和按需引入
  • 🗂 内置与原生应用类似的堆栈路由导航
  • 🗂 内置基于文件目录结构的约定式路由
  • 🌍 内置应用级国际化
  • 📦 内置请求库封装,拥抱 composition api
  • 📦 内置主题定制
  • 📦 内置移动端调试工具
  • 📦 内置 pinia 进行状态管理
  • 📦 内置 mockjs 进行数据 mock
  • 📦 内置 vitest 进行单元测试
  • 📦 内置 cypress 进行端到端测试
  • 📦 内置 unocss 集成
  • 📦 内置 eslintcommitlintlint-stagedprettier 等代码检查/格式化工具
  • 💪 由 varletjs 官方维护,第一方提供对 varlet 的支持

Snipaste_2024-04-20_19-47-15.jpg Snipaste_2024-04-20_19-47-47.jpg Snipaste_2024-04-20_19-47-30.jpg

天天工作台

Electron Vue全家桶

📱 在线预览 | 📖 阅读文档| 🔗 源码地址

一款集桌面管理、效率办公、游戏娱乐为一体的副屏“桌面系统”。除副屏以外,主屏窗口化也可以正常使用,项目基于Electron和Vue全家桶开发。

1695004332-桌面-1385x800.png

1687245185-编组-16-1400x436.png

目前支持在电脑上使用,外接扩展屏的时候,可以实现触摸操作。也可以在主屏中窗口化使用。

也可以结合spacedesk将手机、平板模拟为扩展屏。模拟后可实现相同的功能。相对于直接便携显示器来说,模拟的更加卡一些。

AntdvPro

Vue3 vite4 ant-design-vue4 Pinia UnoCSS Typescript pnpm vue-i18n

📱 在线预览 | 📖 阅读文档| 🔗 源码地址

AntdvPro是一个基于Vue3、Vite4、ant-design-vue4、Pinia、UnoCSS和Typescript的一整套企业级中后台前端/设计解决方案,它参考了阿里react版本antd-pro的设计模式,使用了最新最流行的前端技术栈,内置了动态路由、多主题、多布局等功能,可以帮助你快速搭建企业级中后台产品原型。

640.webp

✨ 特性

  • pnpm:使用了最新的pnpm作为包管理工具,它可以大大减少node_modules的体积,加快包的安装速度,同时还可以共享依赖,减少磁盘占用。
  • vite:vite作为前端开发工具,它可以大大加快项目的启动速度,同时还支持热更新,可以大大提高开发效率。
  • vue3:vue3.3.x作为前端框架,基础代码全部使用script-setup的写法,代码量少维护成本低。
  • nitro mock:采用nitro作为服务端的mock数据,从工程中解耦处理,更加灵活易用。
  • ant-design-vue4:ant-design-vue4作为UI框架,admin-pro的作者也是ant-design-vue的核心成员,可提供长期的维护支持。
  • pinia:pinia作为状态管理工具,它可以大大提高代码的可读性和可维护性,同时还支持Typescript。
  • UnoCSS:原子化的CSS框架,减少我们去想一些通用类名带来的烦恼,提升我们的开发效率。
  • 代码规范:我们封装了一套基于eslint的代码规范配置文件,开箱即用,统一不同团队所带来的问题。
  • 主题:延用了react版本的antd-pro的设计规范,开发了一套基于vue的主题模式,在此基础上增加了一些新的功能,尽可能的满足各种不同的需求。
  • 请求函数:基于axios封装了一套具有完善类型的请求函数,以及一些基础的拦截器的封装,只需要按照需求做对应的实现调整就能满足各种项目带来的不一样的需求。
  • 移动端兼容:基础框架部分我们尽可能的对移动端的模式进行了兼容处理,但是由于我们的主要目标是企业级中后台产品,所以我们并没有对移动端做过多的适配,如果你的项目需要移动端的适配,可以参考我们的代码进行相应的调整。

教务系统

全栈 vue2 Element uniapp

📱 在线预览 | ⚡️ web管理端 | 🔗 源码地址

这是一套支持私有化部署的教培行业教务管理系统,专为教培行业提供云化管理解决方案,是一套纯springboot+mysql微服务项目。系统在功能上注重教务管理,具有排课、消课和在线购课等核心业务功能;系统采用稳定的微服务架构开发,运行流畅,易于部署扩展,支持私有化部署。应用端包括PC管理端、老师手机端、学生手机端,手机端支持微信公众号版+微信小程序

Snipaste_2024-04-20_10-28-49.jpg

Snipaste_2024-04-20_10-30-01.jpg Snipaste_2024-04-20_10-32-19.jpg

✨ 核心功能
  • 学生管理、跟进
  • 课程管理、班级、科目等教务管理
  • 报名管理、预约管理、体验卡
  • 排课、课表
  • 家长互动:学评教、教评学、作业、成绩发布
  • 消课:课堂点名、随到随学、消课次数自定义,支持二维码签到
  • 在线购课
  • 支持预约模式
  • 物料管理
  • 财务管理:报名审核,课酬统计等
  • 促学模块:积分商城、老师点评送积分、积分换礼品
  • 微信公众号支持
  • 组织人员管理、职位管理、角色管理、权限管理、数据权限管理
  • 系统数据统计
  • Uniapp的家长端和老师端,支持微信公众号版+微信小程序

客服系统

vue2 vue-i18n uniapp 全栈

🔗 源码地址

用户端访问【点击体验】

PC客服端访问 【点击体验】账号密码:kefu kefu123

管理后台演示 【点击体验】账号密码:demo demo

本系统(CRMChat)是采用Swoole4+Tp6+Redis+Vue+Mysql开发的独立高性能客服系统,客服系统用户端支持Pc端、移动端、小程序、文章中接入客服,利用超链接、网页内嵌、二维码、定制对接等方式让网上所有通道都可以快速通过本系统联系到商家,商家端支持Pc端、移动端(App)随时随地接收到用户的各种咨询,商家可以添加话术库、也可以对用户进行分组、加标签、加备注进行管理,是一款互联网链接商家的一个桥梁,也是商家客户管理的工具,本开源项目遵循最开放的木兰协议,可以随意使用。商家端APP也不用您自己辛苦上架了,我们提供App工具可以直接下载配置使用, 让您快速拥有一套强大的私有客服系统 。在使用过程中遇到问题随时留言,也欢迎各位大神参与本项目一起完善!!!

2_02.jpg

2_04.jpg

1.1_03 (2).jpg

考试系统

vue2 vuex

📱 在线预览 | 🔗 源码地址

学之思开源考试系统是一款 java + vue 的前后端分离的考试系统。主要优点是开发、部署简单快捷、界面设计友好、代码结构清晰。支持web端和微信小程序,能覆盖到pc机和手机等设备。 支持多种部署方式:集成部署、前后端分离部署、docker部署。

系统展示

  • 学生考试系统

1.png

  • 小程序考试系统

1 (1).png 8.png

参考文章

本周火火火的前端开源项目,有点意思!

8个 yyds 的开源前端实战项目!

8个开源的 Vue / React 小游戏,个个经典!