nuxt3学习（上）

目录结构

.nuxt

Nuxt 使用.nuxt/目录在开发中生成您的Vue应用程序。整个目录将在运行nuxt dev时重新创建。

.output 目录

Nuxt在为生产构建应用程序时创建.output目录,整个目录将在运行nuxt build时重新创建。

assets 目录

assets/ 目录用于添加构建工具(webpack或Vite)将处理的所有网站资源，包含css、img、font等

components 目录

components/目录是您放置所有Vue组件的地方，然后可以在您的页面或其他组件中导入这些组件,Nuxt自动导入你的components目录中的任何组件(以及你可能正在使用的任何模块注册的组件)。可文件夹嵌套，使用组件时拼接目录

composables 目录

Nuxt 3使用composables/目录使用auto-imports自动将Vue组合导入到应用中!
在底层，Nuxt自动生成文件.nuxt/imports.d.ts来声明类型。
注意，为了让Nuxt生成类型，你必须运行nuxi prepare, nuxi dev 或 nuxi build。如果你在没有运行开发服务器的情况下创建了一个可组合对象，TypeScript会抛出一个错误，比如Cannot find name ‘useBar’.

content 目录

Nuxt Content模块读取项目中的content/ 目录并解析.md, .yml, .csv and .json文件为您的应用程序创建一个基于文件的CMS。

• 使用内置组件渲染您的内容。
• 使用类似mongodb的API查询您的内容。
• 使用带有MDC语法的Markdown文件中的Vue组件
• 自动生成导航。
  在项目中安装 @nuxt/content模块
  yarn add --dev @nuxt/content

Layouts 目录

Nuxt提供了一个可定制的布局框架，可以在整个应用程序中使用，非常适合将常见的UI或代码模式提取到可重用的布局组件中。
布局放在layouts/目录中，使用时将通过异步导入自动加载。布局是通过添加到您的app.vue，或者设置一个layout属性作为页面元数据的一部分(如果你使用~/pages集成)，或者手动指定它作为的一个prop。(注意: 布局名称被规范化为串格式，因此 someLayout 变成some-layout。)

middleware 目录

Nuxt提供了一个可定制的路由中间件框架，可以在整个应用程序中使用，非常适合在导航到特定路由之前提取想要运行的代码

路由中间件运行在Nuxt应用程序的Vue部分中。尽管名称相似，但它们与服务器中间件完全不同，服务器中间件运行在应用程序的Nitro服务器部分中。

路由中间件有三种:

• 匿名(或内联)路由中间件，直接在使用它们的页面中定义。
• 命名路由中间件，放置在middleware/ 目录中，在页面上使用时会通过异步导入自动加载。(注意:路由中间件名称被规范化为串串形式，因此someMiddleware 变成 some-middleware。)
• 全局路由中间件，放置在 middleware/目录中(带有.global后缀)，并将在每次路由更改时自动运行。

node_modules 目录

包管理器(npm或yarn或pnpm)创建node_modules/目录来存储项目的依赖项。

pages 目录

Nuxt提供了一个基于文件的路由，在您的web应用程序中使用Vue Router在底层创建路由。

这个目录是 可选的 ，这意味着如果你只使用app.vue， vue-router不会被包括在内(除非你在nuxt.config中设置了pages: true或者有一个app/router.options.ts)，减少应用程序的包大小。

页面是Vue组件，可以使用 .vue, .js, .jsx, .ts or .tsx扩展名

plugins 目录

Nuxt自动读取您的plugins目录中的文件，并在创建Vue应用程序时加载它们。你可以在文件名中使用.server或.client后缀来只在服务器端或客户端加载插件。

public 目录

public/目录直接服务于服务器根目录，包含必须保留其名称的公共文件(例如：robots.txt)或可能不会更改(例如:favicon.ico)。

server 目录

Nuxt自动扫描~/server/api, ~/server/routes, 和 ~/server/middleware目录中的文件，以注册具有HMR支持的API和服务器处理程序。
每个文件都应该导出一个用defineEventHandler()定义的默认函数。
处理程序可以直接返回JSON数据，一个Promise或使用event.node.res.end()发送响应。

utils 目录

Nuxt 3 使用 utils/ 目录在整个应用程序中使用auto-imports自动导入辅助函数和其他实用程序!

.env文件

Nuxt CLI在开发模式下以及运行nuxi build和nuxi generate时内置了dotenv支持。
除了任何进程环境变量外，如果您的项目根目录中有一个.env文件，它将在构建、开发和生成时自动加载，并且在nuxt.config文件和模块中设置的任何环境变量都将可访问。

app.config.ts

Nuxt 3提供了一个app.config配置文件公开应用程序中的响应性配置，能够在生命周期内的运行时更新它，或者使用nuxt插件并使用HMR(热模块替换)编辑它。
你可以使用app.config.ts文件 轻松提供运行时应用配置。它可以有.ts, .js, or .mjs 的扩展。

nuxt.config.ts

Nuxt可以用一个nuxt.config文件轻松配置，该文件可以有js, ts or mjs扩展名。

tsconfig.json