Appearance
🔥 (#77) 扁平化 Nuxt Content 路由
2022 年 9 月
Hey!
我目前正忙于编写《Mastering Nuxt 3》，但我仍然会抽出一些时间来创作其他内容。
这段时间对我来说很忙，但我很高兴能从事激动人心的工作！
我也在迁移我的网站，从 Gridsome 迁移到 Nuxt 3 上。这是一个很大很复杂的项目，因为我的网站有很多事情发生。但与 Nuxt 合作总是很愉快的！
或许我应该写一些关于迁移的帖子？
我现在沉浸在 Nuxt 里 ，所以今天，我们要用两个 Nuxt 技巧。
祝你有一个愉快的一周!
— Michael
📜 强制 Vue 重新渲染
我最初写这篇文章是在 4 年前，所以现在是时候更新了。
这是我最早写的文章之一，而且一直很受欢迎，有超过 50 万阅读的阅读量。
现在我针对 Vue 3 进行了更新，并对它进行了一些扩展。
🔥 如何修复 Vue 中的 TypeScript Intellisense Template 错误
我最近在做一个 Vue 3 项目的时候遇到了这个错误。
TypeScript intellisense is disabled on template. To enable, configure `"jsx": "preserve"` in the `"compilerOptions"` property of tsconfig or jsconfig. To disable this prompt instead, configure `"experimentalDisableTemplateSupport": true` in `"vueCompilerOptions"` property.volar
不必惊慌，只要禁用这个 Volar 信息：问题细节。
在你的 .tsconfig 文件中，你需要添加 "jsx": "preserve" 在 compilerOptions 部分。
{
"compilerOptions": {
"jsx": "preserve"
}
}
我使用的是 Nuxt 3，所以我的 TypeScript 配置文件看起来有点不同。
{
// https://v3.nuxtjs.org/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"jsx": "preserve"
}
}
如果你使用的是 jsconfig 文件，它可能看起来更接近于这样。
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"jsx": "preserve"
},
"include": ["src/**/*"]
}
.tsconfig 上的 jsx 选项 控制 ts 如何转换和输出 .tsx 文件，但这个错误发生在没有 tsx 扩展名的 .vue 文件。
因此，改变这个选项以消除警告对我们的项目没有实际影响。在 Vue 中，我们只使用 TypeScript 进行类型检查，所以这个选项并不影响我们正在做的任何事情。
这个问题可能是因为 VS Code 用来提供 Intellisense 功能的 TypeScript 语言服务而发生的。Volar 使用这项服务，但不幸的是，它没有控制权。
🔥 扁平化 Nuxt Content 路由
我想把我的博客内容组织成几个文件夹：
- 文章：
content/articles/ - Newsletters：
content/newsletters/
默认情况下，Nuxt Content 会将这些路由设置为包括这些前缀。但我希望我所有的路由都是在根级别：
我们可以通过覆盖 _path 属性，为每个 Markdown 文件手动做到这一点，通过设置 frontmatter：
---
title: My Latest Article
date: today
_path: "/my-latest-article"
---
这是很繁琐的，容易出错的，而且一般来说很烦人。
幸运的是，我们可以写一个简单的 Nitro 插件，自动完成这一转换。
在 server/plugins/ 创建一个 content.ts 文件：
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook("content:file:afterParse", (file) => {
for (const prefix of ["/articles", "/newsletters"]) {
if (file._path.startsWith(prefix)) {
// Keep the prefix so we can query based on it still
file._original_dir = prefix;
// Remove prefix from path
file._path = file._path.replace(prefix, "");
}
}
});
});
Nitro 是 Nuxt 内部使用的服务器。我们可以进入处理过程，做一些调整。
如果我们根据路径进行过滤，这样做会破坏 queryContent 的调用，因为queryContent 正在查看我们刚刚修改的 _path 属性。这就是为什么我们要保留那个原始目录。
我们可以修改我们的 queryContent 调用来过滤这个新的 _original_dir 属性。
// Before
queryContent("/articles");
// After
queryContent().where({
_original_dir: { $eq: "/articles" },
});
提示：使用 nuxi clean 来强制 Nuxt Content 重新获取并重新转换你的所有内容。
📜 更好地编写组合逻辑：选项对象 (3/5)
我与 Vue Mastery 合作，创建了这个如何更好地编写可组合逻辑的系列专栏。
在这个系列中，我们涵盖了五个不同的模式。
对于每一种模式，我们都展示了如何实现它，然后我们看到它在 VueUse 的可组合逻辑中运行。
这第三篇文章展示了一个简单的方法，使你的返回值更有用。
在这里阅读它。更好地编写组合逻辑：选项对象（3/5）。
"What one programmer can do in one month, two programmers can do in two months."
💬 程序员生产力的原则 Principles of Programmer Productivity
"一个程序员一个月能做的事，两个程序员两个月就能完成。" —Fred Brooks
"What one programmer can do in one month, two programmers can do in two months." —Fred Brooks
🧠 间隔重复：The CSS Unselector
想要长时间牢牢记住某些事情，最好方式就是定期回顾，逐渐增加回顾的间隔 👨🔬
实际上，记住这些 tips 比发呆有用得多，这是几周前的一个 tip 可以唤起你的记忆。
提起 CSS 我们通常讨论的是如何通过选择器来选择具体元素。
要确保选对了元素，这很难。
我的博客使用了 Vue Router 提供的 .router-link-active 来让链接当前的页面。我会改变当前链接的颜色，让用户知道浏览位置。
我想确保页面里的链接不会使用同样的方式突出展示。
例如，一篇文章开头的目录应该有正常外观的链接，而不是改变颜色。
为了做到这一点，我需要避免选择所有在 href 属性中带有 # 的链接。
.router-link-active: not([href * = "#" ]);
我正在使用一个 :not 查询，但在其中使用一个属性选择器。
我的实际代码甚至更有趣，因为还有一些其他的事情需要我考虑。
.nav-link.router-link-exact-active:not(.site-title):not([href*='#'])
p.s. I also have three courses: Vue Tips Collection, Reusable Components and Clean Components
来源
原文 https://michaelnthiessen.com/weekly-077-september-07/
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。