Nuxt 3 项目结构与基于文件的路由
pages/、layouts/、components/ 自动导入，嵌套路由的文件命名，以及全匹配路由
Nuxt 3 项目结构与基于文件的路由 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
Nuxt 3 是什么
Nuxt 3 是一个构建于 Vue 3 之上的元框架。它提供服务端渲染、基于文件的路由、自动导入和服务器引擎，让您几乎无需配置就能构建全栈 Vue 应用。
pages 目录
pages/ 目录负责驱动路由。每个 .vue 文件都会自动成为一个路由，不需要手动配置路由器。pages/about.vue 会映射到 /about。
pages/
index.vue -> /
about.vue -> /about
contact.vue -> /contact启用路由器
只要存在 pages/ 目录，路由器就会自动启用。在 app.vue 中添加 <NuxtPage />，即可渲染匹配的页面。
<!-- app.vue -->
<template>
<NuxtPage />
</template>嵌套路由
文件夹会创建嵌套路径。pages/blog/index.vue 提供 /blog，而 pages/blog/archive.vue 提供 /blog/archive。
pages/
blog/
index.vue -> /blog
archive.vue -> /blog/archive使用 [id] 定义动态段
将文件名放在方括号中，即可创建动态段。pages/users/[id].vue 会匹配 /users/42，并将 id 暴露为路由参数。
// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"使用 [...slug] 匹配所有路径
展开形式 [...slug].vue 是一个全匹配段。它可以匹配任意深度的路径，非常适合 CMS 内容或自定义 404 处理。
pages/
[...slug].vue -> /a, /a/b, /a/b/c ...layouts 目录
layouts/ 文件夹存放各个页面共享的包装组件，例如页眉、侧边栏和页脚。除非另行覆盖，否则 layouts/default.vue 会包装每个页面。
<!-- layouts/default.vue -->
<template>
<header>My Site</header>
<slot />
</template>选择布局
页面通过 definePageMeta 选择布局。布局中的插槽会渲染页面内容。
<script setup>
definePageMeta({ layout: 'admin' })
</script>自动导入组件
components/ 中的所有内容都会自动导入，不需要 import 语句。嵌套文件夹会添加名称前缀：components/base/Button.vue 会变成 <BaseButton />。
components/
TheHeader.vue -> <TheHeader />
base/Button.vue -> <BaseButton />自动导入组合式函数
composables/ 目录也会自动导入。在其中导出的函数，以及 Nuxt 内置的 useFetch 等函数，都可以在任何地方直接使用，无需导入。
// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importing其他重要目录
Nuxt 还定义了 plugins/（启动时运行）、middleware/（路由守卫）、server/（API 和服务器逻辑）以及 public/（按原样提供的静态资源）。
快速检查
测试您对 Nuxt 结构和路由的了解。
总结
您已经了解了 Nuxt 的结构：
- pages/ 提供基于文件的路由，文件夹可以创建嵌套路由。
- [id] 是动态段，[...slug] 是全匹配段。
- layouts/ 会包装页面，通过 definePageMeta 选择布局。
- components/ 和 composables/ 会自动导入。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 42
- 课程
- 156
常见问题解答
「Nuxt 3 项目结构与基于文件的路由」课时是免费的吗？
是的 — 「Nuxt 3 项目结构与基于文件的路由」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「Nuxt 3 项目结构与基于文件的路由」这节课中我会学到什么？
pages/、layouts/、components/ 自动导入，嵌套路由的文件命名，以及全匹配路由 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「Nuxt 3 项目结构与基于文件的路由」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- Nuxt 3 项目结构与基于文件的路由
- 数据获取：useFetch 与 useAsyncData
- Nuxt 服务端路由与 API 端点
- SSR、SSG 与 SPA 模式