本文默认建立在你已知为什么要使用nuxt的基础上，不会聊背景故事，也不会大段引入代码片段，更多的是给没用nuxt写过业务的朋友一份面条式的梳理。
1.整体
默认内置了一套文件组织结构，固定将对应功能代码放在各个文件夹内即可。
初始化的项目没有全部文件夹，需要使用哪些则创建哪些，粗体为重点关注部分。
|--.nuxt 开发运行时
|--.output 生产构建目标
|--assets 用于组织未编译的静态资源如less,sass等
|--components 模块组件，自动加载，无需显式地在页面中声明引入，约定的命名风格
|--composables 可复用的内容，composables根文件夹下内容会自动加载，用于导出任意方法等
|--content Markdown内容
|--layouts 布局组件，自动加载
2.页面与路由（pages）
如果只有一个页面，则只要看根目录下app.vue即可。
如果不止一个页面，则可以创建pages文件夹，将对应内容放在pages目录下。并在app.vue中写入<NuxtPage/>（类似router-view）即可。
支持创建404.vue来匹配未定义的路由。
路由构建
系统自动按照文件夹内容生成对应嵌套路由，支持动态路由。
详见：v3.nuxtjs.org/guide/direc…
路由访问
通过<NuxtLink>组件（类似router-link）实现路由间快速跳转。
也可通过navigateTo（类似$router.push）编程式导航。
其它设置
通过definePageMeta定义页面元数据，包括设定中间件。
可在nuxt.config.ts中的router.options中定义路由选项，同vue-router。
Composables API
3.布局与版式（layouts）
在layouts文件夹下创建布局方案，放置固定的排版，例如带公共头，不带公共头，带双侧边栏，带单侧边栏等。
默认布局文件为default.vue，布局名同文件名，例如文件名为withLeftSide.vue，那么此布局名称即为withLeftSide。
布局文件
布局文件可以理解为组合一套components和样式进来，设置好一些插槽位。
<header-component />
<slot />
<footer-component />
页面文件
页面文件中则在对应区域需要使用布局的地方，通过<NuxtLayout name="layout-name">进行包裹。
<NuxtLayout>
默认布局的内容
<NuxtLayout name="sidebar">
侧边栏布局中的内容
</NuxtLayout>
</NuxtLayout>
4.组件与第三方组件（components）
在components里放置的组件会根据约定自动注册，在页面中直接引入即可。
自动注册
如果在components根目录下，放置Sidebar.vue自动注册一个Sidebar组件（文件名同名）。
如果在components/common目录下放置sidebar.vue，则自动注册CommonSidebar组件。
动态组件
动态组件名需要使用resolveComponent方法。
<template>
<component :is="clickable ? MyButton : 'div'" />
</template>
<script setup>
const MyButton = resolveComponent('MyButton')
</script>
懒加载
lazy前缀加组件名称配合v-if自动实现模块懒加载。
<LazyMountainsList v-if="show" />
仅客户端
<ClientOnly>标签中放置仅在客户端渲染的组件。
第三方组件
6.资源（assets/public）
编译资源（assets）
less/sass
默认只是支持css，如需要支持less/sass等，需要自行安装对应loader。
npm install --save less less-loader
mixin & global var
当前@nuxtjs/style-resources尚未支持nuxt3，less/sass的mixin等通过增加nuxt.config.ts中vite配置实现。全局引入的css可通过css选项实现。
vite: {
css: {
preprocessorOptions: {
less: {
additionalData: '@import "@/node_modules/csslab/base.less";',
},
},
},
},
css: ["@/node_modules/csslab/reset.css"],
