Kin's Blog

No recent searches

↵ to select↓↑ to navigateesc to close
Search byAlgolia

Veni, Vidi, Vici.

← 返回文章列表

Nuxt.js 改变了我的 Web 开发方式——而且速度之快远超我的预期

从对 Vue 犹豫不决,到一年内构建三个平台

•4 min read•
Nuxt.js 改变了我的 Web 开发方式——而且速度之快远超我的预期

我是用 React 和 Next.js 正经开始前端开发的。那时候我认为那个生态系统最成熟、资源最丰富、也最“工业化”。Vue 给我的感觉像是第二选择——一个推荐给初学者的库,因为它的学习曲线更平缓,但不是“正经项目”会用的东西。

这种看法在我被迫在一个项目中尝试 Vue 之后开始改变,而在发现 Nuxt 之后就再也没有回去过。

我为什么曾对 Vue 有误解

第一次看到 Vue 代码的时候,我的第一反应是“这很像 React,但语法不一样”。从表面上看,这没错。但我没有注意到的是背后的设计哲学差异。

Vue 在设计上对组件应该如何编写有着明确的意见——而事实证明,这种意见在大多数情况下都是正确的选择。单文件组件将模板、逻辑和样式汇集在一个文件中,以一种感觉自然而非武断的方式。Vue 3 引入的 Composition API 让复杂代码变得更容易组织。还有它的文档——大部分由社区撰写——其解释质量是我在别处很少见到的。

它的学习曲线确实比 React 更平缓。但这并不是因为 Vue 更简单——而是因为复杂的东西被更巧妙地隐藏了起来,直到你真的需要它们。

Nuxt 解决了那些我甚至不知道自己有的问题

我开始使用 Nuxt 时预期很低。我以为这只是 Vue 加上自动路由,可能再加一点 SSR。结果发现远不止这些。

第一个真正让我印象深刻的是混合渲染。在同一个项目中,我可以让博客页面使用静态站点生成以保证加载速度,让仪表盘页面使用 SPA 以避免服务器开销,让产品页面使用服务端渲染来满足 SEO 需求。这一切都是按路由配置的,而且配置量极小。在 Next.js 中,同样的设置需要更多分散在各处的显式决策。

自动导入是一个看起来很小、但当你意识到它节省了多少时间时就会觉得非常强大的功能。不再需要在每个文件的顶部写一堆 import 语句。放在 components/ 文件夹里的组件、composables/ 里的组合式函数、utils/ 里的工具函数——全都无需声明即可直接使用。而且有趣的是,Nuxt 足够聪明,只会加载真正被使用到的部分,所以这并不会成为性能负担。

基于 pages/ 文件夹结构的自动路由,感觉像是一个早就该有的约定。不需要单独的路由器文件,不需要手动注册路由——只需创建正确命名的文件,路径就已经可用了。

一年内三个平台

这不是凭空编造的说法。在过去一年里,我成功构建并上线了三个基于 Nuxt 的平台,它们都已经在生产环境中运行:jurnalistik.nlfts.dev 的新闻平台、nlfts.dev 的社区平台,以及 developer.nlfts.dev 的开发者平台。

这种速度并不是因为我突然变成了更优秀的程序员。而是因为我不再把时间花在那些每个新项目都不应该重新思考一遍的样板决策上。

社区与众不同

框架的一个经常被低估的方面是社区的质量。在这方面,Nuxt 拥有不小的优势。Nuxt 社区友好、响应迅速,而且——我最欣赏的一点——不那么正式。

我曾经在文档中发现一个错别字,提交了一个修复它的 pull request,结果几个小时内那个 PR 就被合并了。这不是因为我的贡献有多么了不起,而是因为社区确实对任何大小的改进都持开放态度。这样的经历改变了我看待开源贡献的方式。


如果你曾经因为觉得 Vue 的生态系统还不够成熟而犹豫是否要尝试它,那么我想说——至少根据我的经验——那种疑虑已经没有依据了。Nuxt 已经处在一个非常稳固的位置,而它背后的社区也在持续成长。

评论

Offline