assets
存放 css, 图片和字体,会被构建工具(Vite或webpack)处理
页面中使用
components
存放 Vue 组件(会被自动导入)
默认的导入规则会基于路径目录和文件名,重复的部分将被删除,如
使用时为
可在 nuxt.config.ts 中,将导入规则改为仅根据组件名称而不是路径
composables
存放 Vue组合式函数,即 hooks(顶级文件会被自动导入)
如 composables/useFoo.ts
或
在 .js、.ts 和 .vue 文件中直接使用即可 (已自动导入)
没有运行开发服务器的情况下创建一个组合函数,TypeScript 将会抛出一个错误,如 Cannot find name ‘useBar’, 此时启动项目即可,Nuxt 会自动生成文件 .nuxt/imports.d.ts 来声明类型。
在另一个组合函数中可使用自动导入的组合函数
组合函数中也可访问引入的插件,如
嵌套目录
默认不会自动导入嵌套目录,如
方法一:在顶级文件中主动导出嵌套目录
方法二:修改 nuxt.config.ts 配置
content
存放 .md、.yml、.csv和.json文件,用于创建一个基于文件的内容管理系统(CMS)
用法详见
layouts
存放 .vue 文件,用于定义不同的布局
用法详见
middleware
存放 .ts 文件,用于创建路由中间件(在导航到特定路由之前运行代码)
用法详见
modules
存放 .ts 的本地模块文件(会被自动注册)
本地模块按字母顺序注册,可以通过在每个目录名称前面添加一个数字来改变顺序:
本地模块范例
modules/hello/index.ts
modules/hello/runtime/api-route.ts
当启动Nuxt时,hello模块将被注册,并且/api/hello路由将可用。
node_modules
存放包管理器下载的项目依赖,应该将这个目录添加到你的 .gitignore 文件中
pages
存放页面文件(.vue、.js、.jsx、.mjs、.ts 或 .tsx),并基于文件创建路由
用法详见
plugins
存放 .ts 文件,用于描述插件(顶层文件会被自动注册)
用法详见
public
存放静态资源,如 favicon.ico 等,不会被构建工具处理,会原样打包到生产包中。
页面中使用(在 public/img/ 目录中引用一个图像文件)
server
存放 .ts 文件,用于在应用程序中注册API和服务器处理程序
用法详见
utils
存放 .ts 文件,用于定义全局工具函数(会自动导入)
方式一:命名导出
utils/index.ts
页面中使用
方式二:默认导出
utils/randomEntry.ts
页面中使用
.env
用于指定构建和开发环境变量
.gitignore
指定 Git 不跟踪的文件,默认内容如下:
.nuxtignore
用于指定 Nuxt 在构建阶段应忽略的文件,使用范例如下:
app.vue
Nuxt 的主组件,所有页面都是通过此组件渲染
无 pages 目录时,项目中无路由,仅显示 app.vue 这一个页面
有 pages 目录时,项目按 pages 目录自动创建路由, app.vue 需修改为
app.config.ts
用于在应用程序中公开响应式配置。
使用范例:配置主题
app.config.ts
页面中获取配置,使用 useAppConfig()
nuxt.config.ts
用于为项目添加配置。
用法详见 https://www.nuxt.com.cn/docs/api/nuxt-config
package.json
描述应用程序的所有依赖项和脚本
tsconfig.json
Nuxt 自动生成的 ts 配置文件,保持默认即可。