大家好,这里是大家的林语冰,您现在收看的是 2023 年第 40 周 Vue 官方的技术周报。
免责声明
本文属于是语冰的直男翻译了属于是,仅供粉丝参考,视频解说请临幸 Vue官方周报@bilibili,英文原味版请临幸 Weekly Vue News。
Vue 技术栈
"在 Vue 中创建实际的可重用组件可能具有挑战性,相关问题包括但不限于:改造现存组件、维护一致性以及依赖和状态管理。"
本文深入探讨了 Vue app 内存泄漏的原因,以及识别和修复这些 bug 的优秀策略。
使用 Phaser 和 Ionic Vue 构建手游:第一部分
本系列博客将介绍如何使用 Phaser、Ionic Vue 和 Capacitor 来构建您自己的手机游戏并在现实的移动设备上运行祂。
使用 Vue 3、NodeJS、ExpressJS、OpenAI 构建 ChatGPT 2.0
在本视频中,您将学习如何使用 Vue 3、Node.js、Express 和 OpenAI API 构建一个克隆版 ChatGPT。
诉诸 Playwright 和 Vitest 的完美 Vue 测试环境
在本视频中,您将了解如何将您的测试与特定测试框架解耦。
Vue.js 筑基的终端 UI 框架,祂允许您轻松构建现代终端 App。
Nuxt 技术栈
本文探讨了诉诸错误处理构建坚硬的应用程序,防止用户在您的 Nuxt 3 App 中欲求不满。
挨踢圣经
早点测试早点爽,一直测试一直爽。
Nuxt 小技巧:自定义 SPA 加载模板
您可以使用 Nuxt 的客户端渲染模式来创建 SPA(单页应用程序)。在此模式下,Nuxt 能且仅能在客户端渲染 App。这意味着,服务器能且仅能向客户端发送最小的 HTML 文档。然后,客户端会渲染 App 并从 API 中请求数据。
当使用客户端渲染模式时,Nuxt 会显示加载指示器,直到 App 水合(hydrate)为止。加载指示器是一个简单的旋转器。您可以通过创建自定义加载组件来 DIY 加载指示器。
从 Nuxt 3.7 开始,这个加载指示器默认禁用。您需要在 nuxt.config.ts
文件中手动将 spaLoadingTemplate
选项设置为 true
来启动祂:
js
// nuxt.config.ts
export default defineNuxtConfig({
ssr: false, // 启动 SPA 渲染模式
spaLoadingTemplate: true // 自 Nuxt 3.7 以来默认被禁用
})
您可以在 ~/app/spa-loading-template.html
中放置自定义 HTML 文件来 DIY 加载指示器。该文件必须包含单个 HTML 元素,这会被渲染为加载指示器。举个栗子,官方文档中引用了以下代码:
html
<!-- app/spa-loading-template.html -->
<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
<div class="loader"></div>
<style>
.loader {
display: block;
position: fixed;
z-index: 1031;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #000;
border-left-color: #000;
border-bottom-color: #efefef;
border-right-color: #efefef;
border-radius: 50%;
-webkit-animation: loader 400ms linear infinite;
animation: loader 400ms linear infinite;
}
\@-webkit-keyframes loader {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
}
}
\@keyframes loader {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
前端梗图
UP 猪:"git 和 github 的区别是什么?"
粉丝:"岛国动作片(七龙珠等)和 B 站的区别......"
周边资讯
这部纪录片讲述了 TS 的诞生方式和原因,以及自 TS 首次发布以来该技术和周边社区如何发展的故事。
在某些看似放弃 TS 的大型项目中,本文探讨了开发者是否真的放弃了该语言。
"tsconfig.json 吓尿了所有人。这是一个包含了一大坨潜在选项的巨大文件。"
"但实际上,您只需要关心若干配置选项即可。"
"多年来人们一直在咒骂 JS 没有一种简单的方法来验证 URL,但现在有一种新方法 ------ URL.canParse()!"
Nolan 参团最近关于 Web 组件使用的纷争,强调了使用祂们时需要考虑的权衡。
构建 Meta 的 Threads App(现实世界工程挑战)
- 构建线程。
- 技术选择和工程方法。
- 计划推出。
- 启动。
- 经验教训和后续步骤。
- Node File Router 为 Node.js 提供基于文件的路由。
- 祂与技术无关,支持纯 Node HTTP、TS、Bun、Express 等。
- 零依赖,100% 测试覆盖率。
60秒内画出一幅赝品。
您现在收看的是 Vue 官方周报,学废了的小伙伴可以点赞友情赞助本系列,我们每周三佛系投稿,欢迎关注和订阅最新动态。谢谢大家的彼芯,掰掰~