Vue3生态圈

你对 Vue3 的生态和工具都了解吗,比如有哪些网页 UI 库,有哪些移动 UI 库,有哪些插件,有哪些动画插件,有哪些可视化工具?如果不了解,你就不知道 Vue3 的世界有多精彩!

image-20221019101300848

Web UI 库

1. ElementUI Plus

一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

https://element-plus.org/zh-CN/

2. Ant Design of Vue

Ant Design 的 Vue 实现,开发和服务于企业级后台产品

https://www.antdv.com/docs/vue/introduce-cn

3. BalmUI

基于谷歌的 Material Design,附带 Vue 插件和指令,以及从简单到复杂的高度可定制组件

https://next-material.balmjs.com/

4. Naive UI

图森 Vue3 的组件库,文档完整,我项目中经常使用

https://www.naiveui.com/zh-CN/os-theme

5. arco.design

字节跳动企业级产品设计系统,支持 React 和 Vue 双版本

https://arco.design/

6, Quasar

轻松构建高性能和高质量的 Vue.js 3 用户界面,好用,但没有中文文档

https://quasar.dev/

7. iDUX

Vue3.x 的 UI 组件库,完全使用 TypeScript 开发

https://idux.site/

8. TDesign

腾讯业务团队在服务业务过程中沉淀的一套企业级设计体系

https://tdesign.tencent.com/

https://tdesign.tencent.com/vue-next/overview

9. PrimeVue

易于使用、多功能、高性能的 Vue UI 组件库

https://www.primefaces.org/primevue/

10. DevUI

华为基于 Vue3 和 DevUI 设计的 UI 组件

https://vue-devui.github.io/

11. vuestic-ui

Vue 3 的免费和开源 UI 库 ,UI 非常好看,并且有可用后台管理界面。

https://vuestic.dev/

12. Headless UI

完全无样式、完全可访问的 UI 组件,旨在与 Tailwind CSS 完美集成。

https://headlessui.com/

13. View UI Plus

基于 Vue.js 3 的企业级 UI 组件库和前端解决方案

https://www.iviewui.com/

移动 UI 库

14. Vant

有赞轻量、可靠的移动端组件库

https://vant-contrib.gitee.io/vant/#/zh-CN

15. NutUI

京东风格的轻量级移动端 Vue 组件库,非常适合移动端电商使用。

https://nutui.jd.com/#/

16. Varlet

Material 风格移动端组件库 ,文档非常齐全。

https://varlet.gitee.io/varlet-ui/#/zh-CN/home

17. nutui-bingo

京东基于 NutUI 的抽奖组件库,助力营销活动和小游戏场景。

https://nutui.jd.com/bingo/#/

相关工具

18. unplugin-vue-components

antfu 按需组件自动导入,开箱即用地支持 Vue 2 和 Vue 3,Tree-shakable,只注册你使用的组件,附有流行 UI 库的内置解析器。

https://www.npmjs.com/package/unplugin-vue-components

19. vuex-persistedstate

在页面重新加载之间保持并重载您的 Vuex 状态

https://github.com/robinvdvleuten/vuex-persistedstate

20. vuex-persist

支持 Typescript 的 Vuex 插件,它能够将应用程序的状态保存到持久存储中,例如 Cookies 或 localStorage

https://championswimmer.in/vuex-persist/

21. @vueuse/gesture

手势库,使应用程序具有交互性

https://gesture.vueuse.org/

22. unplugin-auto-import

antfu 自动导入 Vite、Webpack、Rollup 和 esbuild 的 API。支持 TypeScript。

https://github.com/antfu/unplugin-auto-import

23. pinia-plugin-persistedstate

Pinia 商店的可配置持久性

https://github.com/prazdevs/pinia-plugin-persistedstate

24. vue-termui

一个基于 Vue.js 的终端 UI 框架,可让您轻松构建现代终端应用程序

https://vue-termui.dev/

25. Vite

下一代前端开发与构建工具

https://vitejs.cn/

可视化

26. Pdfvuer

DF 查看器,使用 Mozilla 的 PDF.js,支持 Vue2 和 Vue3

https://arkokoley.github.io/pdfvuer/

27. vue3-marquee

无缝滚动组件

https://vue3-marquee.vercel.app/

28. Vue-ECharts

百度 ECharts 的 Vue.js 组件。 配置参考 Echarts 官方 基于 ECharts v5+ 开发,适用于 Vue.js 2/3。

https://vue-echarts.dev/

29. iconpark

字节跳动出品,将一个 SVG 图标转化为多个主题,并生成 React 图标,Vue 图标,svg 图标

https://iconpark.oceanengine.com/home

插件

30. vue-multiselect-next

Vue.js 的通用选择/多选/标记组件

https://vue-multiselect.js.org/

31. vue-print-nb

用于印刷、简单、快速、方便、轻便的指令包装器

https://github.com/Power-kxLee/vue-print-nb

32. vue-i18n-next

Vue3 的国际化插件

https://vue-i18n.intlify.dev/

33. vue-cropper

简单的 vue 图片裁剪插件

http://github.xyxiao.cn/vue-cropper/example/

34. Vue Grid Layout

Vue.js 的网格布局系统

https://jbaysolutions.github.io/

35. Vue Qrcode Reader

允许在不离开浏览器的情况下检测和解码二维码

https://gruhn.github.io/vue-qrcode-reader/

36. Makeit Captcha

基于 Vue3 + Vite + Canvas 开发的滑块验证码,动态生成验证滑块,结合后端的二次校验,能有效的避免被抓取模拟验证

https://admin.makeit.vip/components/captcha

37. vue3-clipboard

Vue 3 的 clipboard.js

https://github.com/soerenmartius/vue3-clipboard

38. vue.draggable

基于 Sortable.js 的 Vue 3 拖放组件

https://sortablejs.github.io/vue.draggable.next/#/simple

39. BetterScroll

解决移动端(已支持 PC)各种滚动场景需求的插件。

https://better-scroll.github.io/docs/zh-CN/

相关生态

40. Vue 插件库

https://www.vue365.cn/

41. Pinia

轻量级状态管理库,API 设计更接近 Vuex 5 的提案

https://pinia.vuejs.org/

42. Nuxt Modules

Nuxt 发现我们的模块列表以增强您的 Nuxt 项目

https://modules.nuxtjs.org/

43. Nuxt 3

轻量级应用框架,可用来创建服务端渲染 (SSR) 应用

https://v3.nuxtjs.org/

44. vuepress

Vue 驱动的静态网站生成器

https://v2.vuepress.vuejs.org/zh/

45. VueUse

强大的 Vue 组合实用程序集合

https://vueuse.org/

动画

46. vue-starport

带有动画的跨路由共享组件

https://vue-starport.netlify.app/

47. @vueuse/motion

Vue Composables 让你的组件动起来

https://motion.vueuse.org/

音视频

48. @vueuse/sound

用于播放音效的 Vue 组合

https://sound.vueuse.org/

相关链接

[1] 前端老司机 40+ Vue3 实用工具分享