Nuxt3项目目录结构
assets
存放 css, 图片和字体，会被构建工具（Vite或webpack）处理
页面中使用
<img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
components
存放 Vue 组件（会被自动导入）
默认的导入规则会基于路径目录和文件名，重复的部分将被删除，如
使用时为
<MyButton />
可在 nuxt.config.ts 中，将导入规则改为仅根据组件名称而不是路径
export default defineNuxtConfig({
components: [
{
path: '~/components',
+ pathPrefix: false,
},
],
});
composables
存放 Vue组合式函数，即 hooks（顶级文件会被自动导入）
如 composables/useFoo.ts
export const useFoo = () => {
return useState('foo', () => 'bar')
}
或
// 它将作为 useFoo() 可用（文件名的驼峰形式，不包括扩展名）
export default function () {
return useState('foo', () => 'bar')
}
在 .js、.ts 和 .vue 文件中直接使用即可 （已自动导入）
<script setup>
const foo = useFoo()
</script>
没有运行开发服务器的情况下创建一个组合函数，TypeScript 将会抛出一个错误，如 Cannot find name ‘useBar’, 此时启动项目即可，Nuxt 会自动生成文件 .nuxt/imports.d.ts 来声明类型。
在另一个组合函数中可使用自动导入的组合函数
export const useFoo = () => {
const nuxtApp = useNuxtApp()
const bar = useBar()
}
组合函数中也可访问引入的插件，如
export const useHello = () => {
const nuxtApp = useNuxtApp()
return nuxtApp.$hello
}
嵌套目录
默认不会自动导入嵌套目录，如
composables/nested/utils.ts //不被扫描
方法一：在顶级文件中主动导出嵌套目录
// composables/index.ts 中
export { utils } from './nested/utils.ts'
方法二：修改 nuxt.config.ts 配置
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 的本地模块文件（会被自动注册）
本地模块按字母顺序注册，可以通过在每个目录名称前面添加一个数字来改变顺序：
modules/
1.first-module/
index.ts
2.second-module.ts
本地模块范例
modules/hello/index.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
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/ 目录中引用一个图像文件）
<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
export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
notation: 'compact',
maximumFractionDigits: 1
})
页面中使用
<template>
<p>{{ formatNumber(1234) }}</p>
</template>
方式二：默认导出
utils/randomEntry.ts
// 它将作为randomEntry()可用（文件名的驼峰形式，不包括扩展名）
export default function (arr: Array<any>) {
return arr[Math.floor(Math.random() * arr.length)]
}
页面中使用
<template>
<p>{{ randomEntry([1,2,3]) }}</p>
</template>
.env
用于指定构建和开发环境变量
要将这个文件添加到你的 .gitignore 文件中
.gitignore
指定 Git 不跟踪的文件，默认内容如下：
# 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 在构建阶段应忽略的文件，使用范例如下：
# 忽略布局文件 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 这一个页面
<template>
<h1>Hello World!</h1>
</template>
有 pages 目录时，项目按 pages 目录自动创建路由， app.vue 需修改为
<template>
<div>
<NuxtLayout>
<NuxtPage/>
</NuxtLayout>
</div>
</template>
app.config.ts
用于在应用程序中公开响应式配置。
使用范例：配置主题
app.config.ts
export default defineAppConfig({
theme: {
primaryColor: '#ababab'
}
})
页面中获取配置，使用 useAppConfig()
<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 配置文件，保持默认即可。
