Nuxt3【详解】目录结构

assets

存放 css, 图片和字体，会被构建工具（Vite或webpack）处理

页面中使用

html 复制代码

<img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />

components

存放 Vue 组件（会被自动导入）

默认的导入规则会基于路径目录和文件名，重复的部分将被删除，如

使用时为

html 复制代码

<MyButton />

可在 nuxt.config.ts 中，将导入规则改为仅根据组件名称而不是路径

ts 复制代码

export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
+     pathPrefix: false,
    },
  ],
});

composables

存放 Vue组合式函数，即 hooks（顶级文件会被自动导入）

如 composables/useFoo.ts

ts 复制代码

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

或

ts 复制代码

// 它将作为 useFoo() 可用（文件名的驼峰形式，不包括扩展名）
export default function () {
  return useState('foo', () => 'bar')
}

在 .js、.ts 和 .vue 文件中直接使用即可（已自动导入）

html 复制代码

<script setup lang="ts">
const foo = useFoo()
</script>

没有运行开发服务器的情况下创建一个组合函数，TypeScript 将会抛出一个错误，如 Cannot find name 'useBar', 此时启动项目即可，Nuxt 会自动生成文件 .nuxt/imports.d.ts 来声明类型。

在另一个组合函数中可使用自动导入的组合函数

ts 复制代码

export const useFoo = () => {
  const nuxtApp = useNuxtApp()
  const bar = useBar()
}

组合函数中也可访问引入的插件，如

ts 复制代码

export const useHello = () => {
  const nuxtApp = useNuxtApp()
  return nuxtApp.$hello
}

嵌套目录

默认不会自动导入嵌套目录，如

js 复制代码

composables/nested/utils.ts //不被扫描

方法一：在顶级文件中主动导出嵌套目录

js 复制代码

// composables/index.ts 中
export { utils } from './nested/utils.ts'

方法二：修改 nuxt.config.ts 配置

js 复制代码

export default defineNuxtConfig({
  imports: {
    dirs: [
      // 扫描顶级模块
      'composables',
      // ... 或扫描带有特定名称和文件扩展名的一级嵌套模块
      'composables/*/index.{ts,js,mjs,mts}',
      // ... 或扫描给定目录中的所有模块
      'composables/**'
    ]
  }
})

content

存放 .md、.yml、.csv和.json文件，用于创建一个基于文件的内容管理系统（CMS）

用法详见 https://blog.csdn.net/weixin_41192489/article/details/141262609

layouts

存放 .vue 文件，用于定义不同的布局

用法详见 https://blog.csdn.net/weixin_41192489/article/details/141263942

middleware

存放 .ts 文件，用于创建路由中间件（在导航到特定路由之前运行代码）

用法详见 https://blog.csdn.net/weixin_41192489/article/details/141266483

modules

存放 .ts 的本地模块文件（会被自动注册）

本地模块按字母顺序注册，可以通过在每个目录名称前面添加一个数字来改变顺序：

css 复制代码

modules/
  1.first-module/
    index.ts
  2.second-module.ts

本地模块范例

modules/hello/index.ts

ts 复制代码

// `nuxt/kit`是一个辅助子路径导入，你可以在定义本地模块时使用
// 这意味着你不需要将`@nuxt/kit`添加到项目的依赖中
import { createResolver, defineNuxtModule, addServerHandler } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'hello'
  },
  setup () {
    const { resolve } = createResolver(import.meta.url)

    // 添加一个API路由
    addServerHandler({
      route: '/api/hello',
      handler: resolve('./runtime/api-route')
    })
  }
})

modules/hello/runtime/api-route.ts

ts 复制代码

export default defineEventHandler(() => {
  return { hello: 'world' }
})

当启动Nuxt时，hello模块将被注册，并且/api/hello路由将可用。

node_modules

存放包管理器下载的项目依赖，应该将这个目录添加到你的 .gitignore 文件中

pages

存放页面文件（.vue、.js、.jsx、.mjs、.ts 或 .tsx），并基于文件创建路由

用法详见 https://blog.csdn.net/weixin_41192489/article/details/141269185

plugins

存放 .ts 文件，用于描述插件（顶层文件会被自动注册）

用法详见 https://blog.csdn.net/weixin_41192489/article/details/141270714

public

存放静态资源，如 favicon.ico 等，不会被构建工具处理，会原样打包到生产包中。

页面中使用（在 public/img/ 目录中引用一个图像文件）

html 复制代码

<img src="/img/nuxt.png" alt="Discover Nuxt 3" />

server

存放 .ts 文件，用于在应用程序中注册API和服务器处理程序

用法详见 https://blog.csdn.net/weixin_41192489/article/details/141271184

utils

存放 .ts 文件，用于定义全局工具函数（会自动导入）

方式一：命名导出

utils/index.ts

ts 复制代码

export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
  notation: 'compact',
  maximumFractionDigits: 1
})

页面中使用

html 复制代码

<template>
  <p>{{ formatNumber(1234) }}</p>
</template>

方式二：默认导出

utils/randomEntry.ts

ts 复制代码

// 它将作为randomEntry()可用（文件名的驼峰形式，不包括扩展名）
export default function (arr: Array<any>) {
  return arr[Math.floor(Math.random() * arr.length)]
}

页面中使用

html 复制代码

<template>
  <p>{{ randomEntry([1,2,3]) }}</p>
</template>

.env

用于指定构建和开发环境变量

dos 复制代码

要将这个文件添加到你的 .gitignore 文件中

.gitignore

指定 Git 不跟踪的文件，默认内容如下：

css 复制代码

# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist

# Node dependencies
node_modules

# Logs
logs
*.log

# Misc
.DS_Store
.fleet
.idea

# Local env files
.env
.env.*
!.env.example

.nuxtignore

用于指定 Nuxt 在构建阶段应忽略的文件，使用范例如下：

bash 复制代码

# 忽略布局文件 foo.vue
layouts/foo.vue
# 忽略以 -ignore.vue 结尾的布局文件
layouts/*-ignore.vue

# 忽略页面文件 bar.vue
pages/bar.vue
# 忽略 ignore 文件夹中的页面文件
pages/ignore/*.vue

# 忽略 foo 文件夹下的路由中间件文件，除了 foo/bar.js
middleware/foo/*.js
!middleware/foo/bar.js

app.vue

Nuxt 的主组件，所有页面都是通过此组件渲染

无 pages 目录时，项目中无路由，仅显示 app.vue 这一个页面

html 复制代码

<template>
  <h1>Hello World!</h1>
</template>

有 pages 目录时，项目按 pages 目录自动创建路由， app.vue 需修改为

html 复制代码

<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

app.config.ts

用于在应用程序中公开响应式配置。

使用范例：配置主题

app.config.ts

ts 复制代码

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

页面中获取配置，使用 useAppConfig()

html 复制代码

<script setup>
const appConfig = useAppConfig()

console.log(appConfig.theme)
</script>

nuxt.config.ts

用于为项目添加配置。

用法详见 https://www.nuxt.com.cn/docs/api/nuxt-config

package.json

描述应用程序的所有依赖项和脚本

tsconfig.json

Nuxt 自动生成的 ts 配置文件，保持默认即可。