2024 Vue 生态工具推荐

大家好，这里是大家的林语冰。

《前端猫猫教》每日 9 点半更新，坚持阅读，自律打卡，每天一次，进步一点。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 The Building Blocks of a Greenfield Vue Application in 2024。

024

在没有任何遗留限制的情况下从零启动一个项目可能会令人鸡冻，但也会令人头大。不受限制地自由构建 App 可能会导致浪费大量时间研究和评估工具，最终会分散实际工作的注意力。即使做出了最好的选择，也总会重新考虑备胎方案，这就是“选择的悖论”。

本期共享的是 —— Vue 生态系统中的所有行业标准工具。

包管理器

处理外部包的人气工具有 3 种：

npm
yarn
pnpm

npm 又老又慢。yarn 速度更快，是一个可靠的选择。但总体而言，pnpm 天下第一，它速度极快且节省空间。pnpm 在许多地方使用每段代码，而不需要额外的副本。此外，pnpm 本身支持具有最少配置的 monorepo 设置。

个人建议：包管理器优先选择 pnpm

构建工具

在这里推荐 Vite 应该不足为奇。Vite 使用原生 ES 模块，实现快如闪电的服务器启动。Vite 具有内置的热模块替换支持，而且还通过 Rollup 优化生产构建，确保既小又快的加载打包。此外，与其他备胎方案相比，Vite 配置要容易得多。最后，Vite 因为与框架无关而获得加分。

个人推荐：构建工具优先选择 Vite

Vue 版本

Vue 2 文档在搜索引擎和 Stackoverflow 中的排名仍然高举不下，如果我们必须在版本之间进行选择，这可能会令人头大。但粉丝请记住，Vue 2 不再开源维护，Vue 3 现在是长期支持的版本。Vue 3 具有先前版本的所有优点，但具有利用组合式 API 的不同语法。

个人建议：Vue 版本优先选择 Vue 3

SFC（单文件组件）

将组件的所有构建块保留在同一个位置是 Vue 的一大特色，SFC = 模板 + 样式 + 脚本。如果您认为某个组件变得又臭又长，那么最好将其拆分为子组件。我们仍然可以为每个部分使用不同的文件，但请不要这样做。

个人建议：优先选用 SFC

路由

Vue 有一个官方的路由模块，它与 Vue 内核深度集成，这使构建 SPA（单页应用程序）变得轻而易举。

一些给力的功能包括嵌套和动态路由、基于模块化组件的配置、路由参数、过渡效果、与自动活动 CSS 类的链接、HTML5 history 模式或哈希模式，以及可自定义的滚动行为。

由于缺乏替代品，Vue Router 无法获得应有的宣传和荣誉，但它确实是一个极其强大且功能齐全的库。

个人建议：优先选用 Vue Router

状态管理

这可能有点令人头大，因为在 Pinia 取代 Vuex 之前，Vuex 多年来一直是官方推荐。Pinia 是从零开始编写的，与 Vue 3 的组合式 API 架构无缝集成。Pinia 现在是状态管理的官方推荐。

Pinia 的唯一真正替代方案是使用自定义组合式函数来保存我们的状态。对于迷你 App 而言，这可能是一个不错的解决方案，但由于 Pinia 遵循相同的架构，具有很小的占用空间、增强的性能和开发工具支持，因此被强烈推荐。

个人建议：优先使用 Pinia

数据请求

原生 fetch 已经获得了重要的浏览器支持，这被认为是人气爆棚的 axios 库的替代品。VueUse 还提供了带有更高级配置选项的 useFetch 钩子。

但我强烈推荐的是 vue-query。它使用声明性语法简化了数据请求，并优雅地处理一大坨重复性任务，比如加载和错误状态、分页、过滤、排序和缓存。

个人建议：数据请求优先选择 Vue Query

组件营销

我确信还有其他选择，但 Storybook 占据主导地位，以至于其他所有选项都不在本人的考虑范围内。真正的问题是 Storybook 是否值得大肆宣传。

就我个人而言，我确实喜欢使用它来单独开发组件。Storybook 速度更快，让我了解组件的每个依赖。此外，它可以是一种很好的文档形式。

个人建议：组件文档优先选择 Storybook

测试

测试问题本身就可以写成一篇文章。我将重点关注我认为对任何 App 单元测试、e2e（端到端测试）和可视化测试都至关重要的测试类型。

单元测试

到目前为止，所有建议均来自我的个人经验。所以 Jest 就是我在本节中应该推荐的内容。它是一款既给力又可靠的测试运行器，我对它非常满意。

但有一个工具我还没有机会测试。Vitest 是一个由 Vite 驱动的测试运行器，具有兼容 Jest 的语法，我认识的每个人都支持它。所以我必须选择它作为推荐。

个人建议：单元测试优先选择 Vitest

端到端测试

使用 Cypress，它不仅是人气最高的选项，而且最新版本在稳定性和消除不稳定方面投入了大量精力。除了成为对开发者最友好的工具之外，它还使其成为 e2e 测试的最佳选择。

另一种选择是 Playwright，总体上可能会更快一些，但对我来说，采用率和生态系统还不够大，不足以在我的管道中得到信任。

个人建议：端到端测试优先选择 Cypress

可视化测试

这个难以抉择。我目前正在使用 Applitools，并且我非常了解良好的可视化测试套件的重要性。虽然但是，多用户环境中的冲突解决是极其痛苦的，并且绝对可以改进。

我的建议肯定是拥有一个可视化测试套件，我保证当我的工作流程不再让我头大时，我会带着一个特定的工具回来。

个人建议：你开心就好

UI 框架

我甚至不记得我最后一次使用 UI 框架的愉快经历。而且可能它并不在 Vue 世界中。选择很多，但问题也很多。配置地狱、臃肿的实现、糟糕的性能和内存泄漏等等。这就是为什么我当前建议在无头组件库之上进行自定义实现。在 Vue 世界中，这意味着 shadcn-vue 构建在 radix-vue 之上。这不是一个我们可以立即安装并开始使用的库。我们需要努力使其适应我们的风格指南，对我来说，这是一件好事。

根据记录，如果您想要开箱即用的 UI 库，若干人气爆棚的选项包括但不限于：

Vuetify
Element UI
Quasar Framework

个人建议：UI 框架优先选择 shadcn-vue 和 radix-vue

静态类型

毋庸置疑，这个话题的争议性比超乎我的想象。我知道 TS 很容易被滥用，并剥夺编程的乐趣，但私以为如果 TS 使用得当，它可以增强我们作为程序员阅读代码的主要角色。强烈推荐批判性思维和 TSLint。

个人建议：静态类型优先选择 TS

IDE（集成开发环境）

有两个人气爆棚且平分秋色的选择：IntelliJ 和 VSCode。IntelliJ 不是免费的，但 Vue 是开箱即用的支持，而 VSCode 是免费且开源的，但需要额外的配置。如果您更喜欢 VSCode，请确保安装 Volar 和 TypeScript Vue Plugin（Volar），增强开发体验。

个人建议：IDE 优先选择 IntelliJ 或 VSCode

API文档

Swagger 是迄今为止人气最高的选择。它基于 OpenAPI 规范，可以轻松地与其他开发者共享 API 文档。这是一个成熟且得到良好支持的项目，背后有一个庞大的社区。

个人建议：API 文档优先选择 Swagger

结语

这些都是我在 2024 年使用 Vue 构建可扩展 App 的个人建议。机智如你可能已经察觉，大部分情况下我都喜欢坚持行业标准。私以为这可以与其他工具产生协同作用，并且它们的热度使得在 StackOverflow 上寻找错误变得更容易。举个栗子，偏离标准，比如实现自己的轻量级路由，一开始似乎是个好主意，但从长远来看，它肯定会导致比解决的问题更多的问题。

本期话题是 —— 你有什么小众但好用的 Vue 工具人推荐吗？

欢迎在本文下方自由言论，文明共享。谢谢大家的点赞，掰掰~