Logo
一梦五千年
  • 工具箱
  • AI 平台
  • 生活随笔
  • 友链
获取天气...
登录
系统状态: 在线
内核版本: 5.15.0-88-GENERIC时区: UTC+8运行时间:
© 2026 一梦五千年
前端开发

前端个人常用插件

主要是存储个人的一些使用的插件

4/29/202626 分钟读完0 次浏览

作者信息

系统
系统对接用户
@sys_post

这个人很懒,什么都没写。

目录

暂无可提取的标题

互动

协作编辑类

1.LuckySheet

介绍:<font style="color:#DF2A3F;background-color:rgba(74, 28, 210, 0.1);">Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。</font>

gitee地址:https://gitee.com/mengshukeji/Luckysheet

升级版:https://gitee.com/dream-num/univer

2.luckysheet-crdt

介绍:<font style="color:rgb(64, 72, 91);">Luckysheet 协同增强版(全功能实现) 请注意:该项目是luckysheet的协同实现版本,主要是实现服务端协同、数据存储,给出 node 集成解决方案,同时对luckysheet做了增强优化,针对源码UI、页面按钮、功能等都做了优化,新增 vchart 图标,前台优化图标协同操作等。</font>

地址:https://gitee.com/wfeng0/luckysheet-crdt

电商类

1.mall-admin-web

介绍:<font style="color:#DF2A3F;background-color:rgba(74, 28, 210, 0.1);">mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。</font>

<font style="color:#000000;background-color:rgba(74, 28, 210, 0.1);">地址:</font>https://gitee.com/macrozheng/mall-admin-web

2.yudao-mall-uniapp 商城

介绍:<font style="color:rgb(64, 72, 91);">芋道商城,基于 Vue3 + Uniapp 实现,支持分销、拼团、砍价、秒杀、优惠券、积分、会员等级、小程序直播、页面 DIY 等功能,100% 开源</font>

地址:https://gitee.com/yudaocode/yudao-mall-uniapp

<font style="color:rgb(64, 72, 91);">后台管理类</font>

1.Vue

1.cool-admin-vue

介绍:cool-admin一个很酷的后台权限管理框架,模块化、插件化、CRUD极速开发,永久开源免费,基于vue3、element-plus、pinia、vite、tailwindcss、i18n等构建

地址:https://gitee.com/cool-team-official/cool-admin-vue

<font style="color:rgb(0, 0, 0);background-color:rgba(74, 28, 210, 0.1) !important;">2.ContiNew Admin 多租户中后台管理框架</font>

介绍:<font style="color:rgb(64, 72, 91);">,页面现代美观,且专注设计与代码细节的 </font><font style="color:rgb(64, 72, 91);">高质量多租户中后台</font><font style="color:rgb(64, 72, 91);"> 管理系统框架。开箱即用,持续迭代优化,持续提供舒适的开发体验。</font>

地址:https://gitee.com/continew/continew-admin

3.Ruoyi-plus多租户

介绍:<font style="color:rgb(64, 72, 91);">多租户后台管理系统 重写RuoYi-Vue所有功能 集成 Sa-Token、Mybatis-Plus、WarmFlow、SpringDoc、Hutool、OSS 定期同步</font>

地址:https://gitee.com/dromara/RuoYi-Vue-Plus

4.avue-cli 多端开发模板

介绍:<font style="color:rgb(64, 72, 91);">基于 vue3 + vite + element plus + avue3 + vue-router + vuex,适配手机、平板、pc 的后台开源免费模板,希望减少工作量,帮助大家实现快速开发。</font>

地址:https://gitee.com/smallweigit/avue-cli

<font style="color:rgb(0, 0, 0);background-color:rgba(74, 28, 210, 0.1) !important;">

</font>

2.React

1.react-big-screen 大屏

介绍:<font style="color:rgb(64, 72, 91);">一个基于 React、Dva、DataV、ECharts 框架的 " </font><font style="color:rgb(64, 72, 91);">数据大屏项目</font><font style="color:rgb(64, 72, 91);"> "。支持数据动态刷新渲染、屏幕适配、数据请求模拟、局部样式、图表自由替换/复用等功能。</font>

地址:https://gitee.com/MTrun/react-big-screen

大屏类

1.<font style="color:#000000;">DataBigScreen</font>

介绍:<font style="color:rgb(64, 72, 91);">基于vue、element-ui、webpack、百度Echart、高德地图vue-amap、datav等技术的大屏数据看板。 实现数据动态刷新渲染、屏幕适应、内部图表组件自由替换、表格组件搜索组件的封装、与后台交互axios等功能模块。</font>

地址:https://gitee.com/suzong/data-big-screen

2.vue-big-screen-plugin

介绍:<font style="color:rgb(64, 72, 91);">这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " </font><font style="color:rgb(64, 72, 91);">数据大屏项目</font><font style="color:rgb(64, 72, 91);"> ",使用 '.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换</font>

地址:https://gitee.com/MTrun/vue-big-screen-plugin

低代码类

1.form-create

介绍:<font style="color:rgb(64, 72, 91);">强大的低代码动态表单组件,通过数据驱动表单渲染,适配移动端,支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。</font>

地址:https://gitee.com/xaboy/form-create

插件类

插件库:https://geekdaxue.co/books/luowenshuai@modules

1.<font style="color:rgb(64, 72, 91);">jordium-gantt-vue3 甘特图</font>

介绍:<font style="color:rgb(64, 72, 91);">jordium-gantt-vue3 是一个基于 Vue 3 和 TypeScript 开发的现代化甘特图组件,专为项目管理和任务调度场景设计。它提供了丰富的交互功能、灵活的配置选项和优雅的视觉效果。</font>

地址:https://gitee.com/jordium/jordium-gantt-vue3

2.js-screen-shot 自定义截屏

介绍:<font style="color:rgb(64, 72, 91);">实现Web端自定义截屏(JS版)</font>

地址:https://gitee.com/likai119/js-screen-shot

3.JustAuth三方登录

介绍:一<font style="color:rgb(64, 72, 91);">个</font><font style="color:rgb(64, 72, 91);">第三方授权登录</font><font style="color:rgb(64, 72, 91);">的</font><font style="color:rgb(64, 72, 91);">工具类库</font><font style="color:rgb(64, 72, 91);">,它可以让我们脱离繁琐的第三方登录 SDK,让登录变得</font><font style="color:rgb(64, 72, 91);">So easy!</font>

地址:https://gitee.com/yadong.zhang/JustAuth

4.Layx窗口

介绍:<font style="color:rgb(64, 72, 91);">Layx 窗口即入口,入口即天地。 可以实现插件多开窗口</font>

地址:https://gitee.com/monksoul/LayX

5.ng-form-element动态表单

介绍:<font style="color:rgb(64, 72, 91);">动态表单,VUE动态表单。基于vue+element ui实现动态表单组件,通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示,动态表格弹窗式维护。致力打造开源最强vue动态表单组件,持续维护。</font>

地址:https://gitee.com/jjxliu306/ng-form-element

6.vue-img-cutter图片裁剪

介绍:<font style="color:rgb(64, 72, 91);">简单易用的vue图片裁剪插件,支持移动图像,裁剪图片,放大缩小图片,上下左右移动,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应你自己的业务需求</font>

地址:https://gitee.com/GLUESTICK/vue-img-cutter

7.vue-plugin-hiprint 自定义模板打印

介绍:<font style="color:rgb(64, 72, 91);">hiprint for Vue2/Vue3 </font><font style="color:rgb(64, 72, 91);">⚡</font><font style="color:rgb(64, 72, 91);">打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑</font>

地址:https://gitee.com/CcSimple/vue-plugin-hiprint

8.zonging 中国行政县区

介绍:<font style="color:rgb(64, 72, 91);">中华人民共和国行政区划:省级(省份直辖市自治区)、 地级(城市)、 县级(区县)、 乡级(乡镇街道)、 村级(村委会居委会)</font>

地址:https://gitee.com/netnr/zoning

9.<font style="color:rgb(68, 68, 68);">MpaasScan 阿里扫码</font>

介绍:uniapp扫码功能精度提高

地址:<font style="color:rgb(0, 127, 255);">mpaas.console.aliyun.com/</font>

10.节点编辑器

介绍:<font style="color:rgb(51, 51, 51);">一个网页可视化编程框架,带有节点编辑器。</font>

官网:https://rete.js.org/

文档:https://geekdaxue.co/read/luowenshuai@modules/gheaw4

11.vue-flow 流程图和节点编辑

介绍:<font style="color:rgb(60, 60, 67);">Vue Flow 内置多种功能,例如缩放、平移、专用控件、单选和多选、可拖动元素、可自定义节点和边以及一系列事件处理程序</font>

<font style="color:rgb(60, 60, 67);">官网:</font>https://vueflow.dev/

<font style="color:rgb(60, 60, 67);">中文文档:</font>https://vue-flow.nodejs.cn/guide/

12.视频播放器--<font style="color:rgb(31, 35, 40);">ChimeePlayer</font>(PC,移动端)

介绍:<font style="color:rgb(31, 35, 40);">这是基于</font><font style="color:rgb(9, 105, 218);">chimee</font><font style="color:rgb(31, 35, 40);">集成的一套您可以直接使用的HTML5播放器,提供有了默认样式,此时要避免CSS中给video写死宽高值---以避免全屏不能正常使用。</font>
文档地址:

GitHub - Chimeejs/chimee-player: A complete set of H5 player. 这是一套包含UI插件、FLV和HLS解码器的快速上手解决方案,可以按您的业务场景适当调整依赖后重新构建打包。

中文文档:https://www.chimee.org/docs/chimee_plugin_usage.html

13.打印工具 <font style="color:rgb(255, 80, 44);background-color:rgb(255, 245, 245);">web-print-pdf</font>

介绍:<font style="color:rgb(31, 35, 40);">web-print-pdf</font><font style="color:rgb(31, 35, 40);"> 是一个全面的 JavaScript 打印库,使 Web 应用能够将 HTML 内容转换为高质量的 PDF 文档并直接从浏览器打印。非常适合发票打印、报表生成、文档管理系统以及任何需要专业打印功能的 Web 应用。</font>

<font style="color:rgb(31, 35, 40);">文档地址:</font>

web-print-pdf/README_CN.md at master · weixiaoyi/web-print-pdf

14.关系图谱

介绍**<font style="color:rgba(15, 23, 42, 0.8);">relation-graph是支持Vue2、Vue3、React的关系数据展示组件。支持通过【插槽】让使用者使用"普通HTML元素、Vue组件、React组件"来完全自定义图形元素,并提供实用的API接口让使用者轻松构建可交互的图形应用</font>**

<font style="color:rgba(15, 23, 42, 0.8);">文档地址:</font>

relation-graph - A Relationship Graph Component

也可以使用 echert 力导向图实现

爬虫类

1.skycaiji 爬虫

介绍:<font style="color:rgb(64, 72, 91);">蓝天采集器是一款开源免费的爬虫系统,仅需点选编辑规则即可采集数据,可运行在本地、虚拟主机或云服务器中,几乎能采集所有类型的网页,无缝对接各类CMS建站程序,免登录实时发布数据,全自动无需人工干预!是网页大数据采集软件中完全跨平台的云端爬虫系统</font>

地址:https://gitee.com/zorlan/skycaiji

2.templatespider 网站模板扒取

介绍:<font style="color:rgb(64, 72, 91);">看好哪个网站,指定好URL,自动扒下来做成 html模版。并且所下载的css、js、图片、html文件会自动分好类保存到特定文件夹!</font>

地址:https://gitee.com/mail_osc/templatespider

移动端(小程序)组件库

uniapp适配 NuiUI

技术栈 vue3

NutUi

技术栈 react

NutUI - 移动端组件库

官方文档:

GitHub - jd-opensource/nutui: 京东风格的移动端 Vue 组件库,支持多端小程序(A Vue.js UI Toolkit for Mobile Web)

arco design

技术栈 react

Arco Design - 企业级产品的完整设计解决方案

经典故事:三大技术栈的“武林秘籍”

根据您的需求,我们将组件库分为三大技术栈:React (Taro)、Vue (Taro) 和 Uni-app (Vue)。每个技术栈都有其独门秘籍。

1. React 技术栈:Taro + React 组件库

如果你是 React 的忠实拥趸,那么 Taro 就是你的不二之选。在 Taro 生态中,有几款组件库表现出色:

组件库开发者/背景核心特点跨端适配能力 (H5/小程序)推荐指数
NutUI-React京东京东官方出品,风格统一,组件丰富,与 Taro 官方合作紧密。优秀 (H5, 微信/支付宝/字节等小程序)⭐⭐⭐⭐⭐
Taroify社区/基于 Vant基于 Vant 样式,简洁美观,组件数量多。良好 (H5, 微信小程序)⭐⭐⭐⭐
Taro UI社区/Taro 官方早期Taro 官方早期配套 UI,组件较基础,更新频率不如 NutUI。一般⭐⭐⭐

推荐理由: NutUI-React 是 React 跨端组件库中的**“六脉神剑”**。它不仅有大厂背书,而且对 Taro 的适配度极高,能最大限度保证 H5 和小程序体验的一致性。

2. Vue 技术栈:Taro + Vue 组件库

如果你更喜欢 Vue 语法,但又想利用 Taro 的多端能力,可以选择 Taro + Vue 的组合。

组件库开发者/背景核心特点跨端适配能力 (H5/小程序)推荐指数
NutUI (Vue)京东京东官方出品,支持 Vue3,与 NutUI-React 共享设计规范。优秀 (H5, 微信/支付宝/字节等小程序)⭐⭐⭐⭐⭐
Vant有赞移动端组件库标杆,但跨端需配合 Vant Weapp,且需要额外的适配工作。需适配 (H5 优秀,小程序需 Vant Weapp)⭐⭐⭐
Varlet社区Material Design 风格,Vue3 级联,性能优秀。良好 (H5 优秀,小程序需 Uni-app 或 Taro 适配)⭐⭐⭐⭐

推荐理由: 在 Taro + Vue 体系中,NutUI (Vue) 依然是首选,它提供了最平滑的跨端体验。

3. Uni-app 技术栈:Uni-app + 专用组件库

如果你追求最广泛的小程序兼容性和最快的开发速度,那么 Uni-app 是你的“倚天剑”。Uni-app 自身基于 Vue,因此它的组件库都是 Vue 体系的。

组件库开发者/背景核心特点跨端适配能力 (H5/小程序)推荐指数
uView Plus社区Uni-app 生态中最受欢迎,组件数量多,文档完善,支持 Vue3。极佳 (H5, 微信/支付宝/百度/头条/QQ等小程序, App)⭐⭐⭐⭐⭐
Wot Design Uni社区基于 Vue3+TS,高颜值,设计规范,支持 nvue。优秀 (H5, 微信/支付宝/钉钉等小程序, App)⭐⭐⭐⭐
uni-uiDCloud 官方官方出品,性能稳定,组件基础,但适配性最稳。极佳 (所有 Uni-app 支持的平台)⭐⭐⭐⭐

推荐理由: uView Plus 是 Uni-app 生态的**“屠龙刀”**,它几乎是 Uni-app 开发者的标配。如果你对设计有更高要求,Wot Design Uni 也是一个非常棒的选择。

总结:你的选择,决定你的未来

选择哪个组件库,最终取决于你的技术栈偏好和项目侧重点:

  1. 如果你是 React 团队,且项目主要面向 H5 和微信小程序:
    • 选择:Taro + NutUI-React。这是 React 阵营中最成熟、最稳定的跨端方案。
  2. 如果你是 Vue 团队,且追求极致的开发效率和多平台覆盖:
    • 选择:Uni-app + uView Plus / Wot Design Uni。Uni-app 在国内小程序生态的兼容性和生态成熟度上,目前略胜一筹。
  3. 如果你是 Vue 团队,但更看重 React 生态的未来发展:
    • 选择:Taro + NutUI (Vue)。

评论区

0 条评论
评论输入
>
* 访问被拒绝:请登录后发表评论 *