Nuxt 3 学习笔记（五）项目结构和自动载入 (Auto Imports) 前言随着整个项目的开发，目录与组件势必

前言

随着整个项目的开发，目录与组件势必也会越来越多，如同 Vue 3 的项目可能会有专门放置组件目录 components 等，在 Vue 3 我们可能不太需要去在意目录的名称，但在 Nuxt 3 的项目下，有一些目录与名称其实有一些基本的规定与名称，只要照着 Nuxt 3 约定好的方式进行开发，就能更好利用 Nuxt 3 帮你完成许多贴心的功能。

Nuxt 3 的目录结构

当我们 Nuxt CLI 建立第一个 Nuxt 3 项目并第一次启动开发服务器后，项目目录结构会长得像这样：

如果你是跟着这个系列安装了 TypeScript、Linter 及 Tailwind CSS 等套件，那么项目目录结构会长得像这样：

虽然我们能依照需求建立文件及目录，但 Nuxt 3 在目录的结构与命名其实有一定的规则与模式，以下针对 Nuxt 3 来讲述一下目录的结构与遵循的方式。

Nuxt 3 预设的目录结构

Nuxt 3 框架希望我们可以专注在开发而不是在配置，所以在预设的情况项目的目录架构已经有一个不错的结构可以遵循。

依据官方文件，一个完整的 Nuxt 3 项目，它的目录结构如下：

nuxt-app/
├── .nuxt/
├── .output/
├── assets/
├── components/
├── composables/
├── content/
├── layouts/
├── middleware/
├── node_modules/
├── pages/
├── plugins/
├── public/
└── server/
    ├── api/
    ├── routes/
    └── middleware/
├── .gitignore
├── .nuxtignore
├── app.config.ts
├── app.vue
├── nuxt.config.ts
├── package.json
└── tsconfig.json

`.nuxt` 目录

开发环境下由 Nuxt 产生出 Vue 的网站， .nuxt 目录是自动产生的，你不应该任意的调整里面文件。

`.output` 目录

当你的网站准备部署至正式环境时，每次编译建构项目时，皆会自动重新产生这个目录，你不应该任意的调整里面文件。

`assets` 目录

顾名思义，这是静态资源文件所放置的位置，目录内通常包含以下类型的文件：

CSS 样式文件 (CSS、SASS 等...)
字型
图片

这些静态资源，最终在项目编译建构时，由 Vite 或 webpack 进行编译打包。

`components` 目录

放置 Vue 组件的地方，Nuxt 会自动引入这个目录中的任何组件。

`composables` 目录

组合式函数放置的目录，简单来说可以把常用或通用的功能写成一个共用的函数或 JS 文件，放置在这个目录视为组合式函数，Nuxt 也会自动引入这些组合式函数，让需要使用的页面或组件可以直接做使用。

`content` 目录

通过使用 Nuxt Content，我们可以在这个目录下建立 .md、 .yml、 .csv 和 .json 文件，Nuxt Content 会读取并解析这些文件并进行渲染，用来建立基于文件的 CMS。

`layouts` 目录

用于放置通用或可能重复使用到的布局模板，提供代码的可重复使用性。

`middleware` 目录

Nuxt 3 提供了路由中间件的概念，用以在导航到下一个页面之前执行一些代码如权限验证。

`node_modules` 目录

通常有使用 Node.js 的套件管理，例如 NPM，对此目录应该有一些印象，使用 Nuxt 3 及项目所需要的相依套件都会存放在这个目录。

`pages` 目录

这个目录主要是用来配置我们的页面，你也可以只使用 app.vue 来完成你的网站，但如果建立了 pages 这个目录，Nuxt 3 会自动整合 vue-router，并会依据目录及文件结构规则来自动产生出对应路由，也是 Nuxt3 产生路由的方式。

`plugins` 目录

Nuxt 会自动引入这个目录文件，作为插件使用，在文件名称可以使用后缀 .server 或 .client，例如， plugin.server.ts 或 plugin.client.ts 来决定只让服务器端或客户端引入这个插件。

`public` 目录

这个目录主要用于服务器根目录提供的文件，包含必须固定的文件名称如 robots.txt 或不太会变动的 favicon.ico。

`server` 目录

用于建立任何后端的逻辑如后端 API，这个目录下还包含了 api、server 和 middleware 来区分功能，不具有自动引入，但支援 HMR。

`.gitignore` 文件

在使用 Git 版本控制时，可以设置一些不需要或忽略关注变动的文件及目录。

`.nuxtignore` 文件

可以设置让 Nuxt 编译建构时，一些不需要或忽略文件。

`app.config.ts` 文件

提供服务运行时暴露给客户端使用的设定，因此，请不要在 app.config.ts 文件中添加任何机密资讯。

`app.vue` 文件

Nuxt 3 网站的入口点组件。

`nuxt.config.ts` 文件

用于配置 Nuxt 项目的设置文件。

`package.json` 文件

这个文件里面定义了项目资讯、脚本、相依套件及版本号，通常有使用 Node.js 套件管理工具建置的项目都会包含此文件。

`tsconfig.json` 文件

Nuxt 3 会在 .nuxt 目录下自动产生一个 tsconfig.json 文件，其中已经包含了一些解析别名等预设配置；你可以通过项目目录下的 tsconfig.json 来配置扩展或覆盖 Nuxt 3 预设的 TypeScript 设置文件。

自订目录名称

前面简介了Nuxt 3 的预设目录结构与用途，在目录名称上 Nuxt 3 也提供了可以调整目录名称的方式，只要在 nuxt.config.ts 修改对应的参数，就可以自订目录的名称。不过呢，也并不是所有的目录都能修改，目前官方提供的 dir 参数共有以下四个目录参数选项供修改：

layouts
middleware
pages
public

例如我想将 pages 目录名称调整为 views 就可以新增下列 dit 设定添加至 nuxt.config.ts，就可以将 pages 目录功能及规则调整为 views 目录来实现。

export default defineNuxtConfig({
  dir: {
    pages: 'views',
  }
}

自动引入 (Auto Imports)

在介绍目录结构时有提到，某些目录下的文件是具有自动引入 (Auto Imports)的功能，意思就是说，当我们在这些特定的目录 components、composables、layouts、plugin 添加文件时，Nuxt 3 会自动引入这些组件或函数，

Nuxt 3 的自动引入具体有以下三种：

Nuxt 常用组件与函数
Vue 3 的 API
基于目录的自动引入

Nuxt 常用组件与函数的自动引入

Nuxt 会自动引入一些组件或组合式函数，用以让开发时可以在全部页面或定义组件和插件可以使用。

Nuxt 自动引入的组件就好比 app.vue 代码内，一开始在 template 就有的 <NuxtWelcome /> 欢迎页面组件，其他还包含了 <NuxtPage>、<NuxtLayout> 和 <NuxtLink> 等，详细可以参考官方文件

例如，下面代码中的 useAsyncData 与 $fetch 就是 Nuxt 自动引入的组合式函数，在各个页面或组件都能做使用。

<script setup>
const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
</script>

Vue 3 的 API 的自动引入

例如，Vue 3 中会使用到的 ref、computed 等这类的 helpers 或 lifecycle hooks，在 Nuxt 3 也都将会自动的引入，不需要在 import。

<script setup>
// 不需要在 import ref 或 computed
const count = ref(1)
const double = computed(() => count.value * 2)
</script>

基于目录的自动引入

如前面所提及的，Nuxt 会自动引入定义在特定目录的文件，例如：

components: 相对于 Vue 的组件。
composables: 相对于 Vue 的组合式函数。

建立一个自动导入的组件

我们建立一个 ./components/IronManWelcome.vue 文件：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-sky-400">2022 iThome</h1>
      <p class="mt-4 text-9xl font-bold text-gray-600">铁人赛</p>
    </div>
  </div>
</template>

在 app.vue 文件中，新增 <IronManWelcome /> 组件。

<template>
  <div>
    <IronManWelcome />
  </div>
</template>

现在，浏览器可以看见我们添加的组件效果。 ![](ithelp.ithome.com.tw/upload/imag

可以发现，我们不需要添加 import IronManWelcome from './components/IronManWelcome' 就可以直接在 template 直接使用 <IronManWelcome /> 组件，这就是 Nuxt 3 基于目录的自动引入功能。

关闭自动引入

如果想关闭 Nuxt 的自动引入组件或函数的功能，可以修改项目目录下的 nuxt.config.ts 文件，将 imports.autoImport 设定为 false。

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

显式引入 (Explicit Imports)

Explicit (显式、明确的)，当我们需要手动引入，就可以用 #import 这个 Nuxt 释出的别名，来个别引入那些具有自动引入的组件或函数。

<script setup>
import { ref, computed } from '#imports'

const count = ref(1)
const double = computed(() => count.value * 2)
</script>

小结

Nuxt 3 的项目目录与结构已经有一个规定可以遵守，Nuxt 3 规划的目录及文件架构，让我们可以不用再烦恼该如何配置，只需要专注开发，当你熟悉这些目录文件规则与自动引入的特性，肯定能更快上手 Nuxt 3。

感谢大家的阅读，也欢迎大家给予建议：）

如果对这个 Nuxt 3 系列感兴趣，可以关注一下小编，也欢迎分享给喜欢或正在学习 Nuxt 3 的伙伴。

Nuxt 3 学习笔记（五）项目结构和自动载入 (Auto Imports)

前言

Nuxt 3 的目录结构

Nuxt 3 预设的目录结构

.nuxt 目录

.output 目录

assets 目录

components 目录

composables 目录

content 目录

layouts 目录

middleware 目录

node_modules 目录

pages 目录

plugins 目录

public 目录

server 目录

.gitignore 文件

.nuxtignore 文件

app.config.ts 文件

app.vue 文件

nuxt.config.ts 文件

package.json 文件

tsconfig.json 文件