Vue 周报：尤大最新演讲~Vite 5 强势官宣！Vue 官方高玩全家桶（49 期）
大家好，这里是大家的林语冰，您现在收看的是第 49 期 Vue 技术周报。
视频解说请临幸 Vue 技术周报@bilibili。
多人活动
Vue 多伦多大会完美谢幕，一共举行了 13 场 Vue 生态的精彩演讲，包括但不限于：
- “Vue & Vite 之父”尤雨溪的《Vue & Vite 的现状与未来》
- “Vuetify 之父” J.L. 的《Vuetify 暗部：弥合差距》
- “Pinia 之父” E.S.M. 的《Pinia 重灾区》
- 详情请传送官网
Vue 技能树
尤雨溪在 Vue 多伦多大会发表了最新演讲《Vue & Vite 的现状与未来》，这大概是尤大今年最新、也是最后的一场演讲，墙裂推荐，前端必看。
如果您不想付费翻墙，墙裂推荐 B 站前端圈 FEDay 大会尤大的同款演讲，欢迎给前端圈三连打卡。
这是 FEDay 大会另一场 Vue 生态的演讲，演讲者蒋豪群也是 Vue 团队核心成员，这位大佬科普了一种 Vue 2/3 共存开发的思路，欢迎三连打卡。
我的老粉都知道，Vue 2 这个月结束就停止维护了，那么 Vue2/3 何去何从，这场演讲或许可以给您提供若干思路。所以这场演讲 UP 主也墙裂推荐。
Vue 3 Suspense API 天克异步 Promise
Vue 3 引入了实验性 Suspense API 组件边界。在处理异步请求时，此 API 乃无价之宝。它能够有效集中地管理 Promise 等异步操作，并在更高层级展示回滚内容，而不是在单个组件中局部管理。
这是一篇会员付费可读的高级教程。如果您有此平台的会员且翻译了此博客，欢迎在本文下方群聊留言共享。
Feature Flag（功能标志）是一个常见的开发场景，可以用来区分不同开发环境的复杂需求，比如我们接触过的 .env 文件和命令行参数等。
这位大佬科普了使用 Vue 组合式函数处理功能标志，这允许在适当的生产环境中测试更复杂的功能，但完全不会给现有用户带来实际问题。
Nuxt 生态
Nuxt 团队官宣 Nuxt Devtools@1.0 正式发布，此开发者工具现在默认启动 Nuxt@">= 3.8"，可用于所有 Nuxt 项目。
Nuxt DevTools 是一组可视化工具，可以辅助您了解 Nuxt App，改善 DX，发现性能瓶颈。
这位大佬科普了当使用 Vite 和 Vue Test Utils（测试工具）测试时，如何高效处理 Auto-Imports（自动导入）。Auto-Imports 可以简化导入组件、模块和插件的方式，增强代码可读性和可维护性。
Nuxt Studio（工作室）是一个 git 筑基的 CMS（内容管理工具），由 Nuxt Content 提供支持，用于构建 Nuxt App。它建立在 GitHub 之上，可在存储库和工作室之间无缝衔接双向同步，它还可以轻松跟踪当前和过去对文件和项目所做的更改。
如果您的 Vue 团队在使用 Nuxt 开发 SSR，可以体验此工具。
Vite 生态
不久前尤雨溪在 Vite 大会上演讲就爆料了 Vite 的未来规划路线，当时 UP 主就知道 Vite 年底会有大动作 —— Vite 团队官宣：Vite 5 正式发布！
重大升级包括但不限于：
- 诉诸 Rollup 4 驱动打包，构建性能优化
- 不再支持 Node.js 14/16/17/19，现在要求 Node.js 18/20+
- 腰斩 CJS，只对 ESM 模块一心一意
- 清空回收站，移除已弃用的 API
- 详情请传送官网
友情赞助
这是 Vue 的终极付费自学全家桶，包括但不限于：
- Vue 大学终身学习权限
- Nuxt 2/3 全家桶
- Pinia 全家桶
- Vue 官方的开发者和高玩认证考核
原价需要 2,772，打折后需要2,772，打折后需要 2,772，打折后需要1,099（狂砍 64%，详情请临幸官网）。
这种付费自学模式和流水线培训有所不同，因为除了需要通过 Vue 官方考核获得可以用于应聘的 Vue 官方技能证书之外，课程收入的 22% 还会反哺给 Vue、Nuxt 和 Pinia 等开源框架，友情赞助开源框架的维护。
程序员语录
“请永远记住，比起脑袋里冒出来的首个主意，通常还会有更棒、更简单的方法去做某事。”
程序员笑话
面试官：数组索引为什么是从 0 开始的？
Vue 小技巧：自动导入组件
此话题有所争议，但本人青睐组件自动导入。您只需在模板中引用组件，组件就可用。无需手动导入它们。此功能在 Nuxt 3 中被大量使用。
我将向您表演如何使用 unplugin-vue-components 在 Vue 3 中实现此功能。
首先，安装插件：
npm i unplugin-vue-components -D
接下来，将其添加到您的 vite.config.ts：
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({
/* 选项 */
})
]
})
GitHub README 涵盖了其他打包器（如 Rollup 或 Webpack）的安装指南。
这样就欧了。现在，您可以在模板中引用组件，而无需手动导入它们：
您现在收看的是 Vue 技术周报，学废了的小伙伴可以订阅专栏合集，我们每周三佛系投稿，欢迎持续关注 Vue 开源技术。谢谢大家的点赞，掰掰~
转载自:https://juejin.cn/post/7309732396081299456