Vue生态库

6/15/2023 Vue生态库

Vue 2
Vue 3
JS
- 图表绘制类
CSS
TS
Lint
Other
强大框架

# Vue 2

Vue 2 (opens new window)
Vue Router (opens new window)，路由管理
Vuex (opens new window)，状态管理
Vant2 (opens new window)，移动端组件库
Swiper (opens new window)，强大的轮播库
Vue Carousel 3d (opens new window)，3d效果轮播库
vue-virtual-scroller (opens new window)，虚拟滚动列表
vue-property-decorator，Vue的类写法，使用装饰器把Vue的写法改造为类写法，即使用Class风格语法编写Vue组件的库
- https://github.com/vuejs/vue-class-component
- https://class-component.vuejs.org/guide/class-component.html#data

# Vue 3

Vue 3 (opens new window)
Vue Router (opens new window)，路由管理
Pinia (opens new window)，状态管理（代替Vuex）
pinia-plugin-persistedstate (opens new window)，pinia持久化存储插件
Vant 4 (opens new window)，移动端组件库
Element Plus (opens new window)，PC UI库
VueUse (opens new window)，常用的组合式函数库，集成了很多功能，可以直接开箱即用
Swiper (opens new window)，强大的轮播库
vue-resize (opens new window)，Detect DOM element resizing
vue-observe-visibility (opens new window)，使用指令 v-observe-visibility 判断元素是否可见
vue-virtual-scroller (opens new window)，虚拟滚动列表
Vitesse (opens new window)，Vitesse vue3+vite，项目脚手架
fast-vue3 (opens new window)，Vue3项目脚手架
mescroll (opens new window)，精致的下拉刷新和上拉加载js框架 (JS framework for pull-refresh and pull-up-loading)
mitt.js (opens new window)，事件总线，用于组件通信
unplugin-auto-import (opens new window) ，vue3 等插件 hooks 自动引入，支持vue, vue-router, vue-i18n, @vueuse/head, @vueuse/core等自动引入，无需再手动import
unplugin-vue-components (opens new window) ，自定义组件自动引入，无需手动引入
vite-plugin-style-import (opens new window)，按需导入组件库样式，例如Vant、Element UI等
unplugin-icons (opens new window)，自动导入icon，比如element等，vite-plugin-style-import无法导入icon）
Vue-Lazyload (opens new window)，图片懒加载

# JS

axios (opens new window)，网络库
lodash，js工具库，throttle、debounce等
- 官网，https://lodash.com/
- 中文，https://www.lodashjs.com/
RxJS，JS响应式编程框架
- 官网，https://rxjs.dev/
- 中文版，https://cn.rx.js.org/manual/overview.html
XState (opens new window)，状态机和状态图框架
Immer (opens new window)，不可变数据框架，例如做撤销/重做等功能时
fabricjs (opens new window)，Canvas工具库
jsQR (opens new window)，JS 扫描二维码库
Day.js (opens new window)，强大的时间处理库
Dinero.js (opens new window)，Money各种转换的库，Dinero.js lets you create, calculate, and format money safely in JavaScript and TypeScript.
UnJS (opens new window)，Vue团队搞Nuxt的时候重新构建了一套JS底层工具库，很强大，建议后面底层库切到该库，比如网络库Ofetch等
highlight.js (opens new window)，语法高亮器，支持多种语言，支持自定义语法
- 中文文档 (opens new window)
- 英文文档 (opens new window)
KaTeX (opens new window)，数学公式渲染器
- 英文文档 (opens new window)

# 图表绘制类

EChats (opens new window)，强大的图表库，开箱即用，优先使用这个
D3.js (opens new window)，数据可视化库，使用SVG、HTML、JS、CSS来构建图形，偏底层，一般有其他库实现不了的，可用D3来实现。下图是官网使用D3制作图形的例子
- observablehq (opens new window)，D3.js作者创作的网站，直接网站输入数据即可调试图形，且可以使用其他图形库
  - Observable官方教程 (opens new window)
relation-graph (opens new window)，这是一个Vue关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。