这是我参与「第五届青训营 」伴学笔记创作活动的第 27 天

刚开始使用Nuxt3开发真的是很坐牢，因为必须要按照各个文件分类放好，而且官方的文档真的是太少了。只能找一些大佬的项目开始拆包慢慢的猜这些文件是干什么的并且对照着官网的文档和API，然后大致需要注意的文件就是下面这些：

app.vue

如果项目中没有pages/，那么就相当于一个单页面的项目，把所有需要展现的都放在里面。
如果有pages/，那Nuxt就会按照Vue Router，首先pages需要有一个根文件，并在app.vue中添加<NuxtPage>组件，这样Nuxt会默认渲染展示这个页面。

Layouts/

这个目录用来防止想要自定义的布局框架，默认布局写在default.vue文件中，并在app.vue中添加<NuxtLayout>组件，如果想要pages/编写的页面也在里面，就把<NuxtPage>组件放在这个组件中。 在布局文件中<slot/>表示其它文件像插入的位置，其它为共享的元素，就和Vue的插槽类似。

nuxt.config.ts

如果想在里面使用process需要手动下载@types/node。我在配置NaiveUI时就出现了这个问题，而且在tsconfig.json“找不到node类型的定义文件”这个问题也出现了，添加完这个依赖之后就解决。
如果要想使用WindiCSS，添加配置时，需要把buildModules换成modules。

yarn add 依赖

assets/

在这里放样式表、字体这类文件。 比如Sass，如果想要导入到其它文件时就要在style中按照相对路径进行导入。

<script scoped src="../assets/*.scss">

middleware/

用来防止中间件，还没用到过。

plugins/

用来放置插件，比如像是naiveui的开发者提供的插件就要自己去git上复制，copy到这里。（文件名称一定要与开发者一致）

如果只要单个页面，那直接在app.vue里开发就可以了，最多把组件进行拆分。（但是不能跳转到单文件组件中真的很离谱）
如果有多个页面就在pages里面分开写，然后在根文件中进行汇总跳转之类的。
如果有一些重复的，比如像是备案号之类的页脚和选项菜单这类页首，就把它们写到layouts中做成布局框架。