likes
comments
collection
share

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

作者站长头像
站长
· 阅读数 21

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

免责声明

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

Vue 技术栈

精简 Vue 的模板引用

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

“只需一小坨代码,Vue 模板引用的问题就直接归零。更少的 IDE 警告、更少的未知错误和更安全的类型检查。”


通过 Netlify 和 GitHub 部署 Vue App

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

本教程科普了一种使用 Netlify 和 GitHub 部署 Vue App 的极简方法。

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

Netlify 是部署 App 的绝佳解决方案,因为它支持 GitHub 等工具,我们能够直接让 GitHub 帐户和 Netlify 帐户梦幻联动,轻而易举地发布我们的 App,草履虫都能学废。

此博客假设您是 Git 和 GitHub 的高手,因为本教程不会介绍支线技能树。我们将只讨论 Netlify 以及如何设置 Netlify 帐户。


方舟 UI

  • 一个用于构建可复用、可扩展设计系统的无头库。
  • 提供 30+ 组件(包括但不限于颜色选择器、日期选择器等)。
  • 兼容 React、Solid 和 Vue。
  • 允许 DIY 您的样式解决方案。

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

Nuxt 技术栈

NuxtIsland 组件是什么鬼物?

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

“这是一个特殊的内置组件,可以让您在服务器上完全渲染组件,这意味着,浏览器不会向客户端提供任何 JS。”

Nuxt Island 是 Nuxt 3 的一个先锋实验性功能,简直酷毙了。即使您使用的是 SSR,且 HTML 内容在服务器上渲染,客户端 JS 仍会在 hydration(注水)期间提供和使用。使用 NuxtIsland 组件,根本没有 hydration。

当我们不需要交互式组件,但我们又需要某些 JS 逻辑来使其工作时,这种使用场景就很有用。

举个栗子,包括但不限于使用语法高亮库,使用繁重的日期工具库,使用类似 Lodash 的工具库等。


在 Nuxt 3 App 中动态启动 SSR/SPA 模式

本文介绍了按需为站点启动或关闭 SSR 的三大不同方案。

在 Nuxt 2 中,您已经可以诉诸某些奇技淫巧根据页面 URL 按需启动 SSR/SPA 模式。但是,这种方法在 Nuxt 3 中不再有效。

这位大佬科普了这种需求的三大方案,第一种是 roteRules(路由规则),第二种是实验性的 x-nuxt-no-ssr header,第三种是自定义 Nitro 中间件。


Nuxt UI 入门

了解关于 Nuxt UI 的所有基础知识,Nuxt UI 是一个现代 Web App 的UI 库。

专业版也可用:ui.nuxt.com/pro?aff=z1N…

油管视频链接请临幸官网。


window.useNuxtApp - 祝福还是安全问题?

debug Nuxt 网站可能很头大,尤其是在非开发模式。

window.useNuxtApp 应该有助于简化此过程。

油管视频链接请临幸官网。

多人活动

VueJS Amsterdam 2024

2024 年 2 月 28-29 日,阿姆斯特丹

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

挨踢圣经

前 90% 的代码占用了前 90% 的开发时间,剩下 10% 的代码也占用了其他 90% 的开发时间。

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

Nuxt 小技巧:服务端路由游乐场

Nuxt DevTools(开发者工具)提供了一个用于发送和测试终点的游乐场。

它就像是 Nuxt 服务器路由的内置 Postman,简直酷毙了!

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

前端梗图

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

周边资讯

加速 JS 生态系统:Tailwind CSS

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

开发者试图在考虑性能的情况下重建 Tailwind CSS,以提高 Tailwind CSS 项目的性能。

这是这位大佬加速 JS 生态系统系列的第八篇博客,Tailwind CSS 已经成为一种人气爆棚的 Web 项目样式设计方案。大佬科普了为 Tailwind CSS 提供动力的架构,以及改进它的奇技淫巧。


诉诸 TS 和 JSON 导入构建轻量级代码生成器

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

“在最近的一个软件开发项目中,我的团队将一个轻量级代码生成器与我想分享的可复用技术结合起来。”


hotkey

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)

在元素上设置 data-hotkey 属性以快速添加键盘快捷键。

当按下键盘上的热键时,会触发对目标元素的操作。默认情况下,热键是从目标元素的 data-hotkey 属性中提取的,但可以通过将热键作为参数传递给注册函数来覆盖默认行为。

如果您有热键的需求,比如类似 QQ 音乐或 VS Code 的热键功能,这或许是一种便捷的技术方案。


我希望早点知道的 20+ 惊艳的 VS Code 小技巧

油管视频链接请临幸官网。


免费的 20 小时 Web 开发速成课

这个深入的教程将教您入门 Web 开发。

您将学习 HTML、CSS 和 JS 等核心技术。

油管视频链接请临幸官网。


您的网站不需要 JS

一个短短一小时的演讲,艾米在演讲中构建了一个完全静态的网站。

她使用一组 HTML 和 CSS 文件,没有跟踪、脚本、服务器或第三方资源。

油管视频链接请临幸官网。

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

Vue官方周报:您不需要 JS!Vue 模板引用的奇技淫巧~方舟无头UI(120期)