大家好,这里是大家的林语冰。
《前端猫猫教》每日 9 点半更新,坚持阅读,自律打卡,每天一次,进步一点。
免责声明
本文属于是语冰的直男翻译了属于是,略有删改,仅供粉丝参考。英文原味版请传送 The Building Blocks of a Greenfield Vue Application in 2024。
在没有任何遗留限制的情况下从零启动一个项目可能会令人鸡冻,但也会令人头大。不受限制地自由构建 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 工具人推荐吗?
欢迎在本文下方自由言论,文明共享。谢谢大家的点赞,掰掰~
《前端猫猫教》每日 9 点半更新,坚持阅读,自律打卡,每天一次,进步一点。
原文链接:https://juejin.cn/post/7341272885061124122 作者:前端猫猫教