Vue 周报:尤大最新演讲~Vite 5 强势官宣!Vue 官方高玩全家桶(49 期)

大家好,这里是大家的林语冰,您现在收看的是第 49 期 Vue 技术周报。

视频解说请临幸 Vue 技术周报@bilibili

多人活动

VueConf Toronto 完美谢幕

Vue 多伦多大会完美谢幕,一共举行了 13 场 Vue 生态的精彩演讲,包括但不限于:

  • "Vue & Vite 之父"尤雨溪的《Vue & Vite 的现状与未来》
  • "Vuetify 之父" J.L. 的《Vuetify 暗部:弥合差距》
  • "Pinia 之父" E.S.M. 的《Pinia 重灾区》
  • 详情请传送官网

Vue 技能树

尤雨溪:Vue & Vite 的现状与未来

尤雨溪在 Vue 多伦多大会发表了最新演讲《Vue & Vite 的现状与未来》,这大概是尤大今年最新、也是最后的一场演讲,墙裂推荐,前端必看。

如果您不想付费翻墙,墙裂推荐 B 站前端圈 FEDay 大会尤大的同款演讲,欢迎给前端圈三连打卡。


蒋豪群:一种 Vue 2/3 共存开发的思路

这是 FEDay 大会另一场 Vue 生态的演讲,演讲者蒋豪群也是 Vue 团队核心成员,这位大佬科普了一种 Vue 2/3 共存开发的思路,欢迎三连打卡。

我的老粉都知道,Vue 2 这个月结束就停止维护了,那么 Vue2/3 何去何从,这场演讲或许可以给您提供若干思路。所以这场演讲 UP 主也墙裂推荐。


Vue 3 Suspense API 天克异步 Promise

Vue 3 引入了实验性 Suspense API 组件边界。在处理异步请求时,此 API 乃无价之宝。它能够有效集中地管理 Promise 等异步操作,并在更高层级展示回滚内容,而不是在单个组件中局部管理。

这是一篇会员付费可读的高级教程。如果您有此平台的会员且翻译了此博客,欢迎在本文下方群聊留言共享。


诉诸 Vue 组合式函数处理功能标志

Feature Flag(功能标志)是一个常见的开发场景,可以用来区分不同开发环境的复杂需求,比如我们接触过的 .env 文件和命令行参数等。

这位大佬科普了使用 Vue 组合式函数处理功能标志,这允许在适当的生产环境中测试更复杂的功能,但完全不会给现有用户带来实际问题。


Nuxt 生态

Nuxt Devtools@1.0

Nuxt 团队官宣 Nuxt Devtools@1.0 正式发布,此开发者工具现在默认启动 Nuxt@">= 3.8",可用于所有 Nuxt 项目。

Nuxt DevTools 是一组可视化工具,可以辅助您了解 Nuxt App,改善 DX,发现性能瓶颈。


Nuxt 3 Auto-Imports 集成测试

这位大佬科普了当使用 Vite 和 Vue Test Utils(测试工具)测试时,如何高效处理 Auto-Imports(自动导入)。Auto-Imports 可以简化导入组件、模块和插件的方式,增强代码可读性和可维护性。


Nuxt Studio 之旅

Nuxt Studio(工作室)是一个 git 筑基的 CMS(内容管理工具),由 Nuxt Content 提供支持,用于构建 Nuxt App。它建立在 GitHub 之上,可在存储库和工作室之间无缝衔接双向同步,它还可以轻松跟踪当前和过去对文件和项目所做的更改。

如果您的 Vue 团队在使用 Nuxt 开发 SSR,可以体验此工具。

Vite 生态

Vite@5.0

不久前尤雨溪在 Vite 大会上演讲就爆料了 Vite 的未来规划路线,当时 UP 主就知道 Vite 年底会有大动作 ------ Vite 团队官宣:Vite 5 正式发布

重大升级包括但不限于:

  • 诉诸 Rollup 4 驱动打包,构建性能优化
  • 不再支持 Node.js 14/16/17/19,现在要求 Node.js 18/20+
  • 腰斩 CJS,只对 ESM 模块一心一意
  • 清空回收站,移除已弃用的 API
  • 详情请传送官网

友情赞助

Vue 终极高玩全家桶

这是 Vue 的终极付费自学全家桶,包括但不限于:

  • Vue 大学终身学习权限
  • Nuxt 2/3 全家桶
  • Pinia 全家桶
  • Vue 官方的开发者和高玩认证考核

原价需要 <math xmlns="http://www.w3.org/1998/Math/MathML"> 2 , 772 ,打折后需要 2,772,打折后需要 </math>2,772,打折后需要1,099(狂砍 64%,详情请临幸官网)。

这种付费自学模式和流水线培训有所不同,因为除了需要通过 Vue 官方考核获得可以用于应聘的 Vue 官方技能证书之外,课程收入的 22% 还会反哺给 Vue、Nuxt 和 Pinia 等开源框架,友情赞助开源框架的维护。

程序员语录

"请永远记住,比起脑袋里冒出来的首个主意,通常还会有更棒、更简单的方法去做某事。"

程序员笑话

面试官:数组索引为什么是从 0 开始的?

Vue 小技巧:自动导入组件

此话题有所争议,但本人青睐组件自动导入。您只需在模板中引用组件,组件就可用。无需手动导入它们。此功能在 Nuxt 3 中被大量使用。

我将向您表演如何使用 unplugin-vue-components 在 Vue 3 中实现此功能。

首先,安装插件:

bash 复制代码
npm i unplugin-vue-components -D

接下来,将其添加到您的 vite.config.ts

js 复制代码
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
  plugins: [
    Components({
      /* 选项 */
    })
  ]
})

GitHub README 涵盖了其他打包器(如 Rollup 或 Webpack)的安装指南。

这样就欧了。现在,您可以在模板中引用组件,而无需手动导入它们:

您现在收看的是 Vue 技术周报,学废了的小伙伴可以订阅专栏合集,我们每周三佛系投稿,欢迎持续关注 Vue 开源技术。谢谢大家的点赞,掰掰~

相关推荐
neter.asia10 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫11 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
十一吖i29 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年30 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_31 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891133 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾35 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu37 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym42 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫43 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js