cssmagic/Nuxt-Notes

Nuxt 3 笔记:文件组织

cssmagic opened this issue · 0 comments

目录结构

  • .nuxt —— 在开发阶段建时(nuxt dev)生成的 Vue 应用。
  • .output —— 为生产环境构建时(nuxt build)生成的产物。
  • assets —— 待编译的静态资源。在 JS 代码中可通过 @/assets/ 来引用此目录中的资源;在 CSS 代码中通过 ~@/assets/ 来引用。(路径别名待确认)
  • components —— 应用的非页面级组件。会被 Nuxt 扫描并自动导入。
  • composables —— 存放组合式函数的文件。会被 Nuxt 扫描并自动导入。
  • content —— 如果站点的内容以静态文件的方式保存(比如 *.md*.yml*.csv),需要放在这里。
  • layouts —— 应用的布局组件。
  • middleware —— 用于存放中间件 JS 文件。
  • pages —— 页面级组件。Nuxt 会根据其内部结构来生成路由,即传说中的 “约定式路由”。
  • plugins —— 插件目录。
  • public —— 无需编译或不想编译的静态资源。在代码中可直接通过 / 来引用此目录中的资源。
  • server —— 用于存放服务端所使用的文件(包括 API、路由、中间件等)。
  • utils —— 用于存放工具函数,会和组合式函数一样被 Nuxt 扫描并自动导入。

根目录文件

  • app.config.(js|ts) —— 暴露应用级配置,在服务器端和浏览器端都可以获取。
  • app.vue —— 整个应用的入口组件。
  • nuxt.config.(js|ts) —— Nuxt 的核心配置文件。
  • package.json —— 项目依赖声明文件。
  • tsconfig.json —— TS 配置文件(默认行为是引用 Nuxt 在构建时自动生成的 .nuxt/tsconfig.json 文件)。在此文件内通过 alias 字段定义路径别名,不会覆盖 Nuxt 预设的路径别名。