【译】Vue 官方周报:Vue组件复用的三大痛点!TS 已死?JS 验证 URL 新方法~(2023 年第 40 周)

大家好,这里是大家的林语冰,您现在收看的是 2023 年第 40 周 Vue 官方的技术周报。

免责声明

本文属于是语冰的直男翻译了属于是,仅供粉丝参考,视频解说请临幸 Vue官方周报@bilibili,英文原味版请临幸 Weekly Vue News

Vue 技术栈

Vue 可复用组件的三大痛点

"在 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 TermUI

Vue.js 筑基的终端 UI 框架,祂允许您轻松构建现代终端 App。

Nuxt 技术栈

如何诉诸错误处理构建坚硬的 Nuxt App

本文探讨了诉诸错误处理构建坚硬的应用程序,防止用户在您的 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 站的区别......"

周边资讯

Typescript 的诞生:纪录片

这部纪录片讲述了 TS 的诞生方式和原因,以及自 TS 首次发布以来该技术和周边社区如何发展的故事。


大型项目正在弃坑 TS 吗?

在某些看似放弃 TS 的大型项目中,本文探讨了开发者是否真的放弃了该语言。


TSConfig 备忘单

"tsconfig.json 吓尿了所有人。这是一个包含了一大坨潜在选项的巨大文件。"

"但实际上,您只需要关心若干配置选项即可。"


JS 验证 URL 的新方法(2023 版)

"多年来人们一直在咒骂 JS 没有一种简单的方法来验证 URL,但现在有一种新方法 ------ URL.canParse()!"


让 Web 组件物尽其用

Nolan 参团最近关于 Web 组件使用的纷争,强调了使用祂们时需要考虑的权衡。


构建 Meta 的 Threads App(现实世界工程挑战)

  • 构建线程。
  • 技术选择和工程方法。
  • 计划推出。
  • 启动。
  • 经验教训和后续步骤。

Node 文件路由器

  • Node File Router 为 Node.js 提供基于文件的路由。
  • 祂与技术无关,支持纯 Node HTTP、TS、Bun、Express 等。
  • 零依赖,100% 测试覆盖率。

克隆蒙娜丽莎

60秒内画出一幅赝品。

您现在收看的是 Vue 官方周报,学废了的小伙伴可以点赞友情赞助本系列,我们每周三佛系投稿,欢迎关注和订阅最新动态。谢谢大家的彼芯,掰掰~

相关推荐
533_28 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
计算机毕设指导61 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
木子02043 小时前
前端VUE项目启动方式
前端·javascript·vue.js
运维-大白同学4 小时前
将django+vue项目发布部署到服务器
服务器·vue.js·django
星星会笑滴5 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
Backstroke fish5 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫5415 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.5 小时前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普5 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5