目录

Nuxt3 开发精髓之一是约定式开发，通过约定省去了大部分配置，虽然开发灵活性有所影响，但及大提高代码直观可读性和开发效率。

Nuxt3 完整第一层目录和文件详情如下，实际项目中可能只使用了部分。

序号	类型	目录或文件名	描述
1	目录	.nuxt	开发期间自动生成 Vue 应用程序和配置的目录，npm run dev 时重新创建整个目录，不要修改此目录内容。
2	目录	.output	生产构建 npm run build 应用程序时创建，不要修改此目录内容。
3	目录	app	应用配置文件，如扩展路由配置
4	目录	assets	静态资源文件，页面和组件等使用时以~/打头，外部 URL 不能访问
5	目录	components	组件文件，子目录会自动导入
6	目录	composables	公共函数文件，子目录不会自动导入
7	目录	content	内容文件，子目录不会自动导入
8	目录	dist	生产构建 npm run generate 应用程序时创建，不要修改此目录内容。
9	目录	layouts	项目布局组件
10	目录	middleware	路由中间件
11	目录	node_modules	项目依赖包存放目录
12	目录	pages	页面文件，根据路径文件名自动生成路由
13	目录	plugins	插件文件，引用第三方插件可在此配置
14	目录	public	公共资源文件，页面和组件等使用时以 / 打头，外部 URL 可访问；如果项目设置了 baseURL 注意加上。
15	目录	server	服务端处理代码文件，分为多个子目录类型管理
16	目录	utils	工具函数文件
17	文件	.gitignore	Git 的配置目录，比如一些文件不用 Git 管理就可以在这个文件中配置
18	文件	.nuxtignore	允许 Nuxt 在构建阶段忽略目录和文件，编写规范与 .gitignore 相同。另外也可以在 ~/nuxt.config.ts 中配置 ignoreOptions、ignorePrefix 和 ignore 选项。
19	文件	app.vue	项目入口文件，可以在这里配置路由的出口，布局等；如果项目只有一个页面，可以直接在此文件中编写代码
20	文件	error.vue	项目异常统一处理页面
21	文件	ecosystem.config.js	项目构建后 PM2 启动的配置文件
22	文件	nuxt.config.ts	nuxt 项目的配置文件，非常重要的配置文件
23	文件	package-lock.json	锁定安装时包的版本，以保证每次 npm install 时版本保持一致；如果需要升级版本，删除此文件后 npm i 即可。
24	文件	package.json	包的配置文件和项目的启动调式命令配置
25	文件	README.md	项目的说明文件，使用 Markdown 语法
26	文件	tsconfig.json	TypeScript 的配置文件

文件

页面（pages）涉及相关内容较多，包括页面组件（components）、页面布局（layouts）、模块化代码（composables），页面路由（即 pages 目录下页面路径）、路由中间件（middleware）、页面导航、页面过渡动画，后面会逐一讲解。

页面必须放在项目根目录的 pages 目录下，页面是 Vue 组件，可以具有 .vue、.js、.jsx、.ts 或 .tsx 扩展名，本教程使用 .vue。

pages 目录是可选的，可以只通过 ~/app.vue 来完成项目，vue-router 也不会被加载的，这样可以减小包的大小。

项目创建后，~/app.vue 中默认使用 NuxtWelcome 标签，是 Nuxt3 提供的默认欢迎页面。请将 NuxtWelcome 替换为 NuxtPage，以便访问 pages 下页面。

在 ~/app.vue 中配置 NuxtPage 后，我们的页面必须有一个单一的根路由，以允许 Nuxt3 在页面之间应用路由转换。创建 ~/pages/index.vue 页面后自动映射到根路由，可以通过 http://locahost:3000 访问。

~/pages/index.vue

<template>
  <div>欢迎访问首页，开启 Nuxt3 之旅！</div>
</template>

修改 app.vue

app.vue

<template>
  <div>
    <nuxt-page></nuxt-page>
  </div>
</template>