Vue生态工具组合

文章目录

1.Vue版本
2.构建工具
3.包管理器
4.状态管理
5.http库
6.UI库
7.站点生成器
8.优质内容收录

vue生态工具多种多样，我们要如何选择并组合起来才最好呢。接下来给大家推荐我认为比较好的工具组合方式，方便大家在搭建vue项目时可做一个参考。

1.Vue版本

新项目推荐优先选择vue3，虽然vue2存量项目巨多，但官方已经不再维护该版本了，况且vue3相对vue2有诸多优势，例如：

速度更快、性能更好
体积更小
更容易维护
更接近原生
更易使用
更好的TS支持
所以，新项目可以无脑选择vue3。
另外，对于存量vue2项目，如果没有太大的ROI不建议去升级到3。因为这里升级带来的价值与可能导致的风险是不匹配的，有可能做多错多。只有评估出有足够价值才需要去做这种升级。

2.构建工具

推荐使用vite，毕竟是下一代前端工具链。相比webapck，vite具备如下有点：

快速的开发体验：由于Vite采用了分块打包和ES6模块语法，因此在开发过程中能够实现快速的热更新和实时预览；
简单易用：相较于Webpack，Vite的配置文件简单明了，易于使用；

集成Vue：Vite和Vue是本家，在使用Vue.js开发项目时，Vite能够提供更好的支持。
因此，除非你依赖特定的 Webpack 特性，否则你可以无脑使用vite*。

3.包管理器

优先推荐 pnpm，相比 npm 和 yarn，其优势在于：

更快速的依赖下载
更高效的利用磁盘空间
更优秀的依赖管理
npm 因为node_modules的嵌套问题，导致多个包之间难免会有公共的依赖，这样嵌套的话，同样的依赖会复制很多次，最终会占据比较大的磁盘空间。
yarn 虽然通过铺平的方式解决了依赖重复很多次的平替，但依然存在 幽灵依赖 和 多个版本只提升一个 导致磁盘空间浪费的问题。
pnpm 通过从全局 store 硬连接到 node_modules/.pnpm，然后通过软链接来组织依赖关系，不但节省了磁盘空间，也消除了幽灵依赖问题，安装速度还快，这在 monorepo 项目中优势更加明显。

4.状态管理

推荐使用 pinia，相比 vuex，pinia 拥有如下优势：

完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
极其轻巧(体积约 1KB)
store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 - - Vuex 中很常见
支持多个Store
支持 Vue devtools、SSR 和 webpack 代码拆分
整体而言，它拥有类型安全、所见即所得的特性，语法上更容易理解和使用，且具备更好的性能。

5.http库

推荐Axios，它简洁、易用且高效，具备如下优势：

支持在浏览器中创建XMLHttpRequest请求，在node.js中创建http请求
能解决回调地狱问题
自动转化为json数据类型
支持Promise API，提供并发请求接口
可以通过网络请求检测进度
- 提供超时处理
浏览器兼容性良好
有拦截器，可以对请求和响应统一处理
是目前最主流的前端网络请求库。

6.UI库

推荐ElementUI、Vuetify或者vant。
其中，ElementUI 更侧重创建风格统一、高效且易于上手的理念。多用于后台管理系统的页面开发，业务组件也多用于数据的处理以及表格表单的展示。
Vuetify 讲究多平台适配，与Google的MaterialDesign设计风格搭配到一起，响应式设计做得更好，适配性更强。vant就是移动端组件库，轻量、可定制，性能极佳。但在国内可能不是很吃香，若是公司有对 IE 的支持需求，选它的时候要三思而后行。
vant 是一个移动端组件库，支持 TS、SSR、按需引入、国际化等等，最重要的是它还支持小程序。官方文档支持中英文，并且文档对开发者也是非常友好，有用例和展示效果。组件丰富，因为有赞团队是做商城类的，所以 Vant 支持了一些商城的特色组件，如地址栏、省市区、商品卡片、优惠券、提交订单、商品规格等等。

7.站点生成器

推荐 Vitepress，相比基于webpack的 VuePress，vitepress借助 Vue 3 和 Vite，能提供更好的开发体验、更好的生产性能、更精美的默认主题等。
另外，它们都是vue团队维护的，官方后续会重点迭代 Vitepress，所以选择 Vitepress 也是大趋势。

8.优质内容收录

推荐 Awesome Vue。它是一个收集了大量Vue框架、组件和资源的GitHub仓库，收录了很多与 Vue 相关的一切优质内容。包括面试题，课程，开源项目，UI 库，第三方包，工具集，开发者工具等，应有尽有，方便开发者快速查找使用。
推荐的vue生态工具就是这些，实际如何选择还需要考虑到业务、团队、基建因素等，这里只是给个参考。