Vue.js 是一个用于构建用户界面的渐进式框架它允许开发者通过组合可复用的组件来创建复杂的前端应用。如下总结超100个Vue常用组件库一移动端 小程序 常用组件库1Vant ui有赞移动 UI 组件库支持 Vue2/3 微信小程序支付宝小程序https://vant-ui.github.io/vant/#/Vant 是由有赞前端团队开发的一套基于 Vue.js 的移动端 UI 组件库它包含了丰富的组件和功能可以帮助开发者快速构建高质量的移动应用。Vant 以简洁易用和高质量的代码为特点同时提供了丰富的文档和示例方便开发者学习和使用。MocCardhttps://www.moccard.com文字 转 图文卡片查询收集记录学习分享精美图文知识卡片 一键制做精美图文知识卡片AI 知识工作空间解放重复繁琐事务。团队与 AI 智能体协同获取知识、自动执行任务轻松搭建专属智能体效率倍增。分享内容不只是传递信息更是一场静谧而深刻的美学之旅2uViewVue2https://v1.uviewui.com/多平台快速开发的UI框架uView UI是uni-app生态最优秀的UI框架全面的组件和便捷的工具会让您信手拈来如鱼得水ni-app在2018年初发布以来一直蓬勃发展一派欣欣向荣社区也是人声鼎沸众望所归。因此uView应运而生uView的目标是成为uni-app生态最优秀的UI框架。关于uView的取名来由首字母u来自于uni-app首字母uni-app是基于Vue.jsVue和View(延伸为UI、视图之意)同音同时view组件uni-app中 最基础最重要的组件故取名uView表达源于uni-app和Vue之意同时在此也对它们表示感谢。3uview-plusVue3https://uiadmin.net/uview-plus/多平台快速开发的UI框架uview-plus是全面兼容nvue的uni-app生态框架全面的组件和便捷的工具会让您信手拈来如鱼得水基于uView2.0初步修改后续会陆续修复vue3兼容性以及组合式API改造等。uview-plus来源于社区也回归到社区正是有一群热爱uni-app生态的同学推着它前行而我们也一如既往的承诺uview-plus永久开源永远免费。关于uview-plus的取名来由就是uview加上plus。关于uview的取名来由首字母u来自于uni-app首字母uni-app是基于Vue.jsVue和View(延伸为UI、视图之意)同音同时view组件是uni-app中 最基础最重要的组件故取名uview-plus表达源于uni-app和Vue之意同时在此也对它们表示感谢。4Cube UI滴滴出行移动端 UI 库https://didi.github.io/cube-ui/#/zh-CNCube UI 是一个基于 Vue.js 的移动端 UI 组件库由滴滴出行前端团队开发。它提供了丰富的组件和样式可以帮助开发者快速构建高质量的移动应用。Cube UI 的设计理念是简单易用、轻量级注重性能和用户体验。5 NuTUI京东移动端 UI 库面向电商业务场景支持 Vue2/3https://nutui.jd.com/#/NuTUI 是一个基于 Vue.js 的企业级 UI 组件库由南京甘祖昌科技有限公司开发。它提供了丰富的组件和样式可以帮助开发者快速构建高质量的 Web 应用。NuTUI 的设计理念是简单易用、灵活可扩展、注重用户体验。6Mint ui 饿了么前端团队开发的移动组件库http://mint-ui.github.io/#!/zh-cnMint UI 是由饿了么前端团队推出的一套基于 Vue.js 的移动端 UI 组件库。它提供了丰富的组件和样式可以帮助开发者快速构建高质量的移动应用。Mint UI 的设计理念是简单易用、高效实用、灵活可扩展。7Varlet UIhttps://varlet.gitee.io/varlet-ui/#/zh-CN/indexVarlet UI 是一款基于 Vue 3 和 TypeScript 的开源 UI 组件库是由中国团队 Varlet 开发和维护的。它以简洁、易用和高效为设计理念提供了丰富的组件和工具方便开发者快速构建优秀的 Web 应用。8OnsenUIhttp://s.onsen.io/Onsen UI 是一个开源的移动端 UI 组件库提供了丰富的组件和样式可以帮助开发者快速构建优秀的混合移动应用。Onsen UI 基于 Web Components 技术开发支持多个框架包括 Vue.js、Angular、React 等。9VUX移动端 UI 组件库针对微信强势优化https://vux.li/VUX 是一个基于 Vue.js 的移动端 UI 组件库由大众点评前端团队开发。它提供了丰富的组件和样式可以帮助开发者快速构建高质量的移动应用。VUX 的设计理念是简洁易用、高效实用、可定制化。二PC端WEB端常用组件库1Element UI Vue2饿了么前端团队开发 https://element.eleme.io/#/Element UI 是一个基于 Vue.js 2.0 的开源 UI 组件库由饿了么前端团队开发和维护提供了丰富的组件和样式适用于构建 Web 应用的各种 UI 界面。DeepMetierhttps://www.deepmetier.com/DeepMetier让 AI 成为你的专业伙伴面向 C 端与 B 端的综合性智能体平台。内置智能体、工作流与自主规划能力一站式覆盖内容生成、办公自动化与行业赋能支持内网私有化部署。2Element UI PLUS Vue3https://element-plus.org/zh-CN/#/zh-CNElement UI PLUS简称 EPLUS是在 Element UI 基础上由社区开发者自发推出的 Element UI 增强版组件库。它在 Element UI 的基础上提供了更多的功能和组件并且对一些组件的样式和行为进行了改进和优化。3Ant Design Vue (2/3)https://2x.antdv.com/components/overview-cn/Ant Design Vue 是一款由 Ant Design 团队开发和维护的基于 Vue.js 的 UI 组件库它以 Ant Design 设计体系为基础提供了一系列优雅、实用、高质量的组件和样式适用于 Web 应用的各种 UI 界面。4Naive UIhttps://www.naiveui.com/zh-CN/os-themeNaive UI 是一款由 Vue.js 爱好者自发开发的 UI 组件库它采用了现代化的设计和技术提供了一系列简洁、易用、美观的组件和样式。5AvueVue动态组件库https://avuejs.com/Avue6Vuetify 3老牌 Vue UI 基于谷歌的 Material Design 样式开发支持 Vue3https://vuetifyjs.com/zh-Hans/Vuetify 3 是一个基于 Vue.js 的响应式 Material Design 组件库旨在为开发人员提供用于构建 Web 应用程序和移动应用程序的丰富、美观和易用的组件。Vuetify 3 与 Vue 3 的生态系统深度集成可以在 Vue.js 应用程序中无缝使用。Vuetify 3 的组件库包含了多种组件如按钮、表单、菜单、对话框、标签页等等可以帮助开发人员快速构建具有丰富 UI 和交互功能的应用程序。7iView一套基于 Vue.js 的高质量UI 组件库 https://www.iviewui.com/iView 是一个基于 Vue.js 的 UI 组件库旨在为开发人员提供用于构建 Web 应用程序的丰富、美观和易用的组件。iView 的设计风格简约、清新具有响应式布局和可访问性可以适应不同的屏幕尺寸和设备。开发人员可以使用 iView 的自定义样式或预定义的主题来定义应用程序的外观和感觉。8Vue Materialhttps://www.creative-tim.com/vuematerial/Vue Material 是一个基于 Vue.js 的 UI 组件库它提供了一组美观、易用且高度可定制的组件包括按钮、卡片、表单、菜单、对话框、进度条、图标等等。Vue Material 的设计风格遵循 Google Material Design 指南具有明亮、清晰、简洁的外观和响应式布局可以适应不同的屏幕尺寸和设备。9Vue Material Kithttps://www.creative-tim.com/product/vue-material-kit10vue-element-admin https://panjiachen.github.io/vue-element-admin-site/zh/Vue Element Admin 是一个开箱即用的后台管理系统模板基于 Vue.js 和 Element UI 组件库构建。它提供了许多常见的后台管理功能如登录、权限管理、数据展示、数据编辑、图表展示、富文本编辑器等等。Vue Element Admin 具有良好的扩展性和可定制性可以根据需要添加或修改组件和页面。它还提供了丰富的文档和示例使开发人员可以轻松地学习和使用它的组件和 API。11Vue Bootstraphttps://bootstrap-vue.org/Vue Bootstrap 是一个基于 Vue.js 的 UI 组件库它提供了一组美观、易用且高度可定制的组件包括按钮、卡片、表格、表单、导航栏、轮播图、模态框等等。Vue Bootstrap 的设计风格基于 Twitter Bootstrap具有简洁、现代和响应式的外观可以适应不同的屏幕尺寸和设备。同时Vue Bootstrap 还提供了许多自定义选项使开发人员可以根据自己的需要调整组件的外观和行为。12Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。https://chenz24.github.io/vue-blu/#/Vue-Blu 是一个基于 Vue.js 和 Bulma CSS 框架构建的 UI 组件库提供了一组美观、易用且高度可定制的组件包括表单、按钮、卡片、面包屑、导航栏、面板等等。Vue-Blu 的设计风格基于 Material Design具有简洁、现代和响应式的外观可以适应不同的屏幕尺寸和设备。同时Vue-Blu 还提供了许多自定义选项使开发人员可以根据自己的需要调整组件的外观和行为。13Keen UIhttps://josephuspaye.github.io/Keen-UI/#/ui-alertKeen UI 是一个基于 Vue.js 的轻量级 UI 组件库它提供了一组简单、灵活和易用的组件包括按钮、表格、表单、标签页、导航栏、进度条、模态框等等。Keen UI 的设计风格基于 Material Design具有现代和响应式的外观可以适应不同的屏幕尺寸和设备。Keen UI 还提供了许多自定义选项使开发人员可以根据自己的需要调整组件的外观和行为14Buefyhttps://buefy.org/Buefy 是一个基于 Vue.js 和 Bulma CSS 框架构建的 UI 组件库提供了一组简单、灵活、易用的组件包括按钮、表格、表单、标签页、导航栏、进度条、模态框、消息提示等等。Buefy 的设计风格也基于 Bulma具有现代、干净和响应式的外观适用于构建各种类型的 Web 应用程序。Buefy 还提供了很多自定义选项可以让开发人员轻松地调整组件的外观和行为。15Fish-UIhttps://myliang.github.io/fish-ui/#/components/indexFish-UI是一个基于Vue.js的组件库旨在为开发者提供一组易用、高效、美观的UI组件。Fish-UI提供了丰富的组件包括表单、表格、弹窗、日期选择器、按钮、图标等等可以满足不同应用场景的需求。Fish-UI的特点主要包括简单易用Fish-UI提供了简单易用的API和文档使得开发者可以轻松地使用和学习Fish-UI。高效性能Fish-UI采用了Vue.js的虚拟DOM技术可以实现高效的渲染和更新提高应用程序的性能。定制化Fish-UI提供了多种主题和自定义选项可以根据不同的需求进行定制。社区支持Fish-UI拥有一个活跃的社区提供了各种插件、工具和示例帮助开发者更好地使用和学习Fish-UI。16Quasar中文官网http://www.quasarchs.com/Quasar是一个基于Vue.js的框架旨在为Web和移动应用程序开发提供一致的体验。Quasar提供了一组丰富的UI组件和工具使得开发者可以轻松地构建响应式Web和移动应用程序。Quasar的特点主要包括响应式设计Quasar提供了一组响应式UI组件使得应用程序可以适配不同的设备和屏幕尺寸。跨平台支持Quasar可以同时构建Web和移动应用程序开发者可以使用同样的代码和工具来构建应用程序。多样化的UI组件Quasar提供了丰富的UI组件包括按钮、表格、表单、对话框、进度条等等满足不同应用程序的需求。丰富的工具集Quasar提供了一组实用的工具包括国际化、路由、状态管理等等帮助开发者更快速地开发应用程序。社区支持Quasar拥有一个庞大的社区提供了各种文档、示例和插件帮助开发者更好地使用和学习Quasar。23hey UI https://www.heyui.top/24CoreUIhttps://coreui.io/vue/25Arco Designhttps://arco.design/vueArco Design 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统Arco Design Vue 是基于 Arco Design 的 Vue3 组件库于2021年10月开源提供 71 个组件。26OpenTiny - TinyVuehttps://opentiny.design/https://opentiny.design/tiny-vue/zh-CN/os-theme/overview27Vuestic UIhttps://ui.vuestic.dev/28PrimeVuehttps://primevue.org/29daisyuihttps://daisyui.com/最流行的组件库为Tailwind CSSdaisyUI 将组件类名添加到 Tailwind CSS 中因此您可以制作美丽的网站 比以往更快。不要每次都重复造轮子 yawing face emoji在Tailwind CSS项目中您需要为每个元素编写实用程序类名。数千个类名仅用于为最基本的元素定义样式。不用再写100 个类名对每个元素每个页面每个项目一遍又一遍…30DevUIhttps://devui.design/DevUI 为 Web 应用提供了丰富的基础 UI 组件我们还将持续探索企业级应用的最佳 UI 实践欢迎尝试使用 DevUI。31MateChat (AI对话组件库)https://matechat.gitcode.com/MateChat致力于构建不同业务场景下高一致性的GenAI体验系统语言同时匹配各种工具/平台的原生业务场景和界面特征提供更适合研发工具领域的对话组件打造流畅亲和、跨界一致、易学易用的用户体验以及易接入、易维护、易扩展的开发体验。32PrimeVuePremium UI .p-titleSuite for VueEnhance your web applications with PrimeVue’s comprehensive suite of customizable, feature-rich UI components.https://primevue.dev/33TDesignhttps://tdesign.tencent.com/为设计师 开发者打造工作美学从消费产品到金融服务从 B 端到 C 端产品从大品牌到个人开发者TDesign 都能充分满足低成本高效有品质感的前端设计和开发工作助力提升产品体验有效提升设计研发效能34Nuxt UI亮点Nuxt 3/4 官方旗舰Reka UI Tailwind CSSSSR 满分全量无障碍、RTL 暗黑模式、Figma 设计稿使用场景需要 SSR、SEO、i18n 的企业级中后台、营销官网GitHub Stars5.2 kGitHubhttps://github.com/nuxt/ui官网https://ui.nuxt.com35Reka UIhttps://ui.nuxt.com/亮点Vue 官方支持的 Headless 内核零样式、100 % 可定制、TypeScript 友好使用场景自建 Design System、需要极致可访问性GitHubhttps://github.com/unovue/reka-ui官网https://reka-ui.com36Shadcn-vue亮点复制粘贴即可用基于 Reka UI Tailwind CSS极客最爱使用场景追求最小 bundle、只想要用到的组件GitHubhttps://github.com/radix-vue/shadcn-vue官网https://www.shadcn-vue.com37Flowbite -vue亮点与 Flowbite Figma 套件 1:1 对齐27 个常用组件使用场景设计-开发协作紧密、像素级还原GitHubhttps://github.com/themesberg/flowbite-vue官网https://flowbite-vue.com38Ant Design X (AI对话组件库)https://x.ant.design/https://github.com/ant-design/xAnt Group 团队打造的面向 AI 时代的全新企业级前端组件库融合 Copilot、Agent、AI 驱动表单/表格等能力支持多模型智能推荐与企业场景适配。39Ant Design X Vue (AI对话组件库)https://github.com/wzc520pyfm/ant-design-x-vueAnt Design X 的 Vue 实现支持 Vue 3集成 AI 驱动的表单、智能助手、Copilot 体验等适配前端低代码和 AI 场景。40ChatUI (by Alibaba) (AI对话组件库)https://chatui.io/https://github.com/alibaba/ChatUI阿里巴巴开源的跨端 AI 聊天 UI 组件库适配 React/Vue内置消息流、对话历史、意图识别等丰富组件适合 LLM、ChatBot 产品开发。41TDesign Chat (by Tencent) (AI对话组件库)https://tdesign.tencent.com/chat/getting-started腾讯 TDesign 推出的 AI 聊天组件支持 React/Vue/小程序等具备对话流、智能回复、Prompt 工程、语音识别等多项 AI 能力。42Element Plus X (AI对话组件库)https://element-plus-x.com/https://github.com/HeJiaYue520/Element-Plus-X基于 Element Plus 打造的 AI 组件库支持智能表单、AI 助手、Copilot 集成、智能推荐等企业级场景。43Vercel AI SDK (AI对话组件库)https://vercel.com/ai-sdkhttps://github.com/vercel/aiVercel 官方推出的 AI 组件库支持 React、Vue 等主流框架内置聊天、流式内容生成、与 OpenAI/Anthropic/HuggingFace 等模型无缝集成。44CopilotKit (AI对话组件库)https://www.copilotkit.ai/https://github.com/CopilotKit/CopilotKit极易集成的 AI Copilot 前端解决方案支持 React、Next.js助力企业/个人快速搭建带有 Copilot 体验的应用。45Lobe UI (by Microsoft) (AI对话组件库)https://github.com/lobehub/lobe-ui微软旗下 LobeHub 推出的 AI UI 组件库聚焦 Copilot 聊天、Prompt 编辑、LLM 交互等场景。46Chatbot UI (AI对话组件库)https://ui.lobehub.com/https://github.com/mckaywrigley/chatbot-ui极受欢迎的 ChatGPT 风格对话组件库支持 React适合二次开发和产品落地。47ChatGPT-Next-Web (AI对话组件库)https://nextchat.club/https://github.com/ChatGPTNextWeb/NextChat开箱即用的 ChatGPT 网页端内置丰富的 AI 交互组件支持自定义主题和多模型切换。48FastGPT UI (AI对话组件库)https://fastgpt.io/https://github.com/labring/FastGPT企业级 LLM 应用组件库支持知识库、对话、多模态文件处理等 AI 交互。三数据可视化组件库数据大屏1Echarts图表组件库 https://echarts.apache.orgEChartsEnterprise Charts是一个由百度开源的数据可视化库用于创建交互式的图表和数据可视化界面。它是一个基于JavaScript的库可在Web应用程序中使用。ECharts提供了丰富的图表类型包括折线图、柱状图、饼图、散点图、雷达图、热力图、地图等。它还支持多种数据格式的输入包括常见的JSON、XML和CSV。ECharts提供了灵活的配置选项使用户可以根据自己的需求定制图表的外观和行为。2highcharts图表组件库https://www.hcharts.cn/Highcharts 是一个流行的 JavaScript 图表库用于创建交互式和可定制化的图表和数据可视化。它为开发人员提供了丰富的图表类型和灵活的配置选项使其能够满足各种数据可视化需求。Highcharts 在各种 Web 应用程序和数据可视化场景中广泛应用包括数据分析、报表展示、仪表盘、实时监控等。其简单易用的接口和强大的功能使开发人员能够快速构建美观且交互性强的图表组件帮助用户更好地理解和呈现数据。3Datav 数据大屏组件库Datav是一个专业的数据可视化工具它为用户提供了各种可视化组件、模板、图表等元素帮助用户快速构建数据可视化页面支持多种数据源的导入和自定义数据处理具有快速、易用、可扩展等优点。【Vue2http://datav.jiaminghi.com/】【Vue3https://datav-vue3.netlify.app/】4vue-seamless-scroll Vue无缝滚动组件vue-seamless-scroll 是一个基于 Vue.js 的插件用于实现无缝滚动效果的组件。它提供了一种简单的方式来创建水平或垂直方向上的无缝滚动视图。Vue2https://chenxuan0000.github.io/vue-seamless-scroll/Vue3https://doc.wssio.com/opensource/vue3-seamless-scroll/使用 vue-seamless-scroll 插件可以轻松实现网页上的无缝滚动效果适用于新闻滚动条、轮播图、横向导航、滚动广告等场景。通过简单的配置和定制可以使滚动视图适应不同的设计需求并提供良好的用户体验。5AntV 蚂蚁集团全新一代数据可视化解决方案https://antv.vision/AntV 是一家专注于数据可视化的公司他们的 G2 库提供了一套功能强大的图表组件适用于大数据展示和分析。AntV/G2 提供了 Vue.js 的官方封装可以轻松地在 Vue.js 项目中使用。6Chart.jshttps://chartjs.bootcss.com/为设计和开发人员准备的简单、灵活的 JavaScript 图表工具7v-charts Vue图表组件库在使用 echarts 生成图表时经常需要做繁琐的数据类型转化、修改复杂的配置项v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件只需要统一提供一种对前后端都友好的数据格式设置简单的配置项便可轻松生成常见的图表https://vue-echarts.github.io/8Viserjshttps://viserjs.github.io/ViserVue 是一个基于 G2 和 Vue.js 的数据可视化库它提供了一套易用且强大的图表组件和交互工具。ViserVue 结合了 G2 的功能和 Vue.js 的开发方式可以帮助你快速构建漂亮的数据可视化应用。9 Vue baidu map 百度地图组件Vue Baidu Map 是一个用于在 Vue.js 应用中集成百度地图的插件。它提供了一种简单的方式来在 Vue 组件中显示和操作地图并且可以利用百度地图的各种功能和服务。基于Vue 2.x的百度地图组件中文文档https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 在线预览https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting基于Vue3.x的百度地图组件vue-baidu-map-3x http://map.heifahaizei.com/doc/index.html通过 Vue Baidu Map 插件你可以方便地将百度地图集成到 Vue.js 应用中实现地图展示、交互和功能适用于各种需要地图支持的应用场景如位置展示、导航、地点搜索等。10ppchart echarts社区http://ppchart.com/#/11isqqwecharts社区https://www.isqqw.com/12makeapieecharts社区https://www.makeapie.cn/echarts13Chart.Topecharts社区http://chart.365api.cn/#/14datav.geoatlas地图生成器https://datav.aliyun.com/portal/school/atlas/area_selector15GOJSHTML5 交互性图形库https://gojs.net/latest/index.htmlGOJS 是一个用于创建交互式图表的 JavaScript 库主要用于展示和操作复杂的图表、流程图、组织结构图等。它是一个功能强大且高度灵活的工具允许开发者通过简单的 API 创建出复杂的数据可视化应用。主要特点灵活性GOJS 提供了强大的自定义功能用户可以完全控制图形的每个细节。性能优化即使在处理大规模数据集时GOJS 也能保持高效的渲染速度。交互性支持拖拽节点、缩放和平移画布、选择和高亮显示等功能。响应式设计适用于各种屏幕尺寸包括桌面、平板和手机。丰富的示例官方文档提供了大量的示例代码帮助开发者快速上手。模块化可以按需加载所需的特性减少应用体积。兼容性支持所有现代浏览器包括 IE11 及以上版本。使用场景流程图如工作流、业务流程图。网络图社交网络、系统架构图等。组织结构图公司内部结构、项目团队结构等。图表如关系图、ER 图实体关系图等。16D3JShttps://d3js.org/D3.jsData-Driven Documents是一个用于网页上以数据驱动文档的JavaScript库。它结合了强大的视觉化能力和HTML、SVG及CSS标准使得开发者能够利用数据去创建复杂的、动态的、可交互的数据可视化图表。特点数据绑定D3.js 使用数据数组来“绑定”到DOM元素上使得每个数据项都能对应到一个或者多个DOM元素。高度可定制用户可以完全控制每一个细节从数据映射到视觉属性如颜色、大小等再到交互行为。基于Web标准利用SVG、Canvas以及HTML这使得D3.js可以用来创建适应任何现代浏览器的应用。动画与过渡支持平滑的动画和过渡效果使得数据的变化更加生动直观。交互性通过事件处理器用户可以轻松添加鼠标悬停、点击等交互效果。模块化D3.js 的核心功能可以拆分成小的模块这使得库更轻量级并允许开发者只引入所需的部分。四动画组件库1swiper轮播图组件库Swiper 是一个流行的移动端轮播图组件库用于创建滑动轮播和触摸滑动效果的移动端应用程序。它是一个基于 JavaScript 的库具有平滑的滑动效果、丰富的配置选项和灵活的扩展性。https://www.swiper.com.cn/https://swiperjs.com/demosSwiper 组件库广泛应用于移动端应用开发中的轮播图场景如产品展示、图片轮播、新闻滚动、广告推广等。其易用性、灵活性和丰富的功能使开发人员能够快速集成和定制滑动轮播效果提供优秀的移动端用户体验。2kinesis动画组件库包括过渡动画、滚动效果、缩放、淡入淡出等https://aminerman.com/kinesis/#/3vue-seamless-scroll Vue无缝滚动组件Vue2https://chenxuan0000.github.io/vue-seamless-scroll/Vue3https://doc.wssio.com/opensource/vue3-seamless-scroll/4Loading加载动画组件https://loading.io/spinner/Loading加载动画组件是一种用于展示页面或组件正在加载的动画效果的组件。在 Vue.js 中有许多开源的 Loading加载动画组件库可以使用这些组件库提供了各种各样的加载动画效果可以帮助开发人员为页面或组件添加一些生动的动画效果增强用户体验。5Animate.csshttps://animate.style/Animate.css 是一个流行的前端动画库它提供了一系列预定义的 CSS 动画效果使开发人员能够轻松地在网页或应用程序中添加动画效果。5Velocityjshttp://www.velocityjs.org/结合了 Velocity.js 和 Vue 的动画库可以通过声明式的方式在 Vue 组件中实现高性能的动画效果。6Vue-Motionhttps://posva.net/vue-motion/#/一个简洁的 Vue 动画库基于动画库 Framer Motion提供了流畅的物理动画效果和强大的动画控制能力。五文本编辑器组件库1TinyMCE 富文本编辑器官网及文档https://www.tiny.cloud/中文文档http://tinymce.ax-z.cn/官网下载https://www.tiny.cloud/get-tiny/self-hosted/Githubhttps://github.com/tinymcevue-tinymce https://packy-tang.gitee.io/vue-tinymce/#/【Vue整合地址】TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。TinyMCE的优势开源可商用基于LGPL2.1插件丰富自带插件基本涵盖日常所需功能示例看下面的Demo-2接口丰富可扩展性强有能力可以无限拓展功能界面好看符合现代审美提供经典、内联、沉浸无干扰三种模式详见“介绍与入门”对标准支持优秀自v5开始多语言支持官网可下载几十种语言。2vue-quill-editor富文本编辑器https://github.surmon.me/vue-quill-editorhttps://github.com/surmon-china/vue-quill-editor3MarkdownEditor Markdown文本编辑器https://b3log.org/vditor/官网地址https://b3log.org/vditor/demo/vue.htmlVue当中使用六3D组件库1ThreeJS 3D组件库https://threejs.org/Three.js 是一个流行的开源 JavaScript 库用于在 Web 浏览器中创建和展示 3D 图形场景。它基于 WebGL 技术提供了一组强大的工具和功能使开发者能够轻松地构建复杂的交互式 3D 应用程序和动画效果。2A-Frame web 虚拟现实框架https://aframe.io/A-Frame 是一个基于 Web 技术的开源框架用于构建虚拟现实VR和增强现实AR应用程序。它是由 Mozilla 团队开发的建立在 HTML、CSS 和 JavaScript 的基础上通过简单的标记语言和组件系统使开发者能够轻松创建和展示交互式的 VR 和 AR 内容。3BabylonJs 3D游戏框架Babylon.js 是一个强大的开源 JavaScript 框架用于构建高性能的 3D 游戏、虚拟现实VR和增强现实AR应用程序。它提供了丰富的功能和工具使开发者能够创建复杂的交互式 3D 场景和游戏体验。虚拟数字人WEB3D3D建筑3D设计元宇宙空间网页游戏小程序游戏https://www.babylonjs.com/通过使用 Babylon.js开发者可以创建各种类型的 3D 应用程序和游戏包括虚拟现实、增强现实、角色扮演游戏、射击游戏、模拟器等。它提供了强大的工具和功能使得构建复杂的 3D 体验变得更加简单和高效4vue-3d-loader 基于threeJS的vue 3D展示组件https://king2088.github.io/vue-3d-loader-docs/zh/5Galacean 移动优先的高性能 Web 互动引擎蚂蚁集团https://galacean.antgroup.com/#/6Orillusion次时代 WebGPU 引擎https://www.orillusion.com/七Vue微前端组件库1qiankunhttps://qiankun.umijs.org/zh虽然qiankun本身并不直接与Vue绑定但它是一个非常流行的微前端解决方案支持多种框架包括Vue。它使用了JS的动态导入import()来实现子应用的懒加载以及通过全局事件总线、数据流等方式来解决微应用间的通信问题。2Vue Micro-Apphttps://micro-zoe.github.io/micro-app/Vue Micro-App这是一个基于Vue 3的微前端解决方案它利用Vue 3的新特性如Composition API和Teleport提供了一种更现代的微前端解决方案。2SingleSpa VueSingleSpa VueSingleSpa是一个成熟的微前端框架它提供了丰富的API来管理微应用的生命周期。SingleSpa Vue是SingleSpa的Vue版本它使得Vue应用可以无缝地集成到SingleSpa的微前端架构中。https://single-spa.js.org/https://single-spa.js.org/docs/ecosystem-vue/八Vue拖拽组件库1Vue3 DnD拖拽组件库https://www.vue3-dnd.com/轻松实现拖拽魔法:探索Vue 3的DnD组件实现Vue3页面拖拽功能九Markdown静态网站生成器1VuePresshttps://vuepress.vuejs.orgVuePressVue 驱动的静态网站生成器快速上手项目简介简洁至上以 Markdown 为中心的项目结构以最少的配置帮助你专注于写作。Vue 驱动享受 Vue 的开发体验可以在 Markdown 中使用 Vue 组件又可以使用 Vue 来开发自定义主题。高性能VuePress 会为每个页面预渲染生成静态的 HTML同时每个页面被加载的时候将作为 SPA 运行。主题提供了一个开箱即用的默认主题。你也可以挑选一个社区主题或者创建一个你自己的主题。插件灵活的插件API使得插件可以为你的站点提供许多即插即用的功能。打包工具推荐的打包工具是 Vite 但也同样支持使用 Webpack 。选一个你喜欢的来使用吧2VitePresshttps://vitepress.dev/VitePress 是什么VitePress 是一个静态站点生成器 (SSG)专为构建快速、以内容为中心的站点而设计。简而言之VitePress 获取用 Markdown 编写的内容对其应用主题并生成可以轻松部署到任何地方的静态 HTML 页面。只是想尝试一下跳到快速开始。使用场景文档VitePress 附带一个专为技术文档设计的默认主题。你现在正在阅读的这个页面以及 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等文档都是基于这个主题的。Vue.js 官方文档也是基于 VitePress 的。但是为了可以在不同的翻译文档之间切换它自定义了自己的主题。博客、档案和营销网站VitePress 支持完全的自定义主题具有标准 Vite Vue 应用程序的开发体验。基于 Vite 构建还意味着可以直接利用其生态系统中丰富的 Vite 插件。此外VitePress 提供了灵活的 API 来加载数据 (本地或远程)也可以动态生成路由。只要可以在构建时确定数据就可以使用它来构建几乎任何东西。Vue.js 官方博客是一个简单的博客页面它根据本地内容生成其索引页面十其他组件库1v3-color-picker颜色选择器组件库https://doc.wssio.com/opensource/v3-color-picker/2VueUse是一个基于Vue 3的组合式功能集合库VueUse是一个基于Vue 3的组合式功能集合库它提供了一系列的组合式函数Composition API可以帮助开发者更方便地在Vue应用中实现各种常见的功能和交互。VueUse的目标是简化日常开发中的重复代码提供开箱即用的实用工具让开发者可以专注于业务逻辑。https://vueuse.org/35000个组件大集合来啦https://uiverse.io/惊呆了。这里居然有5000个前端组件涵盖各种场景简直无敌了4MocCardMocCard魔卡文字 转 图文卡片查询收集记录学习分享精美图文知识卡片 一键制做精美图文知识卡片AI 知识工作空间解放重复繁琐事务。团队与 AI 智能体协同获取知识、自动执行任务轻松搭建专属智能体效率倍增。分享内容不只是传递信息更是一场静谧而深刻的美学之旅https://www.moccard.com在这个信息爆炸的时代我们每天都在疯狂摄入收藏了无数干货转发了大段文字可真正沉淀下来的有多少https://www.moccard.com很多时候那些触动心灵的句子最终都躺在冰冷的备忘录里吃灰。直到我遇见了 MocCard才发现原来知识的整理可以如此优雅。✨ 不仅仅是转换更是一场美学重塑以前觉得做笔记是任务现在变成了享受。MocCard 最打动我的是它对“分享”二字的重新定义。正如它所说“分享内容不只是传递信息更是一场静谧而深刻的美学之旅。” 让文字有温度让知识有归处哪怕是晦涩难懂的专业术语或是一闪而过的灵感碎片经过 MocCard 的梳理都能变成一张张精美的图文卡片。️ 视觉治愈系不再是密密麻麻的文字堆砌而是精心设计的排版与配色。每一张卡片都像是一幅小小的画报让人忍不住想要点开细读甚至设为壁纸。‍♀️ 静谧的记录时光在这个喧嚣的世界里给自己留一段静谧的时间。把文字变成卡片的过程其实也是在和自己对话。慢下来去咀嚼每一个字的深意去感受知识在指尖流动的温度。 仪式感满满的分享当你把制作好的卡片分享给朋友或发布在社交平台时传递的不再只是冷冰冰的信息而是一份带着审美与思考的礼物。生活需要仪式感知识的沉淀亦是如此。与其让灵感在角落落灰不如让它在画报里绽放。 你们平时是怎么整理读书笔记的呢是手写党还是电子党在评论区晒晒你的笔记风格吧#MocCard #知识卡片 #读书笔记 #文字控 #治愈系 #学习方法 #效率工具 #美学 #排版设计 #好物分享