LiuZhaoSen

Nuxt目录说明

发表于 2024-07-20阅读量 140前端

Nuxt3需要Node.js - v18.0.0 或更新版本

# 安装

npx nuxi@latest init <project-name>
npm install
npm run dev

访问 http://localhost:3000

# 目录说明

  • assets/ 目录用于添加所有将由构建工具处理的网站css等资源（默认使用~/assets路径）
  • components/ 目录放置所有 Vue 组件的地方，按路径名称+文件名称自动导入
components/test.vue 可以使用<Test/>标签
components/Test/index.vue 也可以使用<Test/>标签，默认索引是index
components/Test/name.vue 可以使用<TestName/>标签 
components/Test/Admin/adminEdit.vue 可以使用<TestAdminEdit/>标签 （重复部分删除）
  • composables/ 目录将你的Vue组合式函数自动导入到你的应用程序中（默认仅扫描顶级目录）
  • content/ 目录为你的应用创建一个解析.md、.yml、.csv和.json文件的内容管理系统（需要单独安装@nuxt/content模块）
  • layouts/ 提供了一个布局框架，默认default.vue通过<NuxtLayout>加载
  • pages/ 自动为目录中的每个页面创建一个路由

动态路由：单括号[]中放置任何内容，它将被转换为动态路由参数,可通过{{ $route.params.group }} {{ $route.params.id }}获取路由参数

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

可选路由：双括号[[]]中参数是可选的
-| pages/
---| [[可选名称]]/
-----| index.vue

全匹配路由：创建一个名为 [...名称].vue 的文件,这将匹配该路径下的所有路由,适合异常处理
-| pages/
---| [...404].vue

嵌套路由：相当于/parent，/parent/chil，需要在parent.vue中使用<NuxtPage>视图组件
-| pages/
---| parent/
------| child.vue
---| parent.vue
  • plugins/ 插件系统，这里面的所有插件都会自动注册（默认顶层文件）
  • public/ 目录用于提供网站的静态资源（默认路径/）
  • server/ 目录用于在应用程序中注册API和服务器处理程序
-| server/
---| api/
-----| hello.ts      # /api/hello
---| routes/
-----| bonjour.ts    # /bonjour
---| middleware/
-----| log.ts        # 记录所有请求
  • utils/ 自动导入目录中的工具函数（跟composables一样，默认扫描顶层和默认命名）
  • app.vue 主入口页面，
  • app.config.ts 一般是定义网站配置（如主题变体、标题）以及不敏感的项目配置等
  • nuxt.config.ts 项目主配置
export default defineNuxtConfig({
  runtimeConfig: {
    // 只在服务器端可用的私有键
    id: '123',
    // public中的键可在服务端和客户端使用
    public: {
      name: 'lzs'
    }
  }
})

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
//runtimeConfig.id
//runtimeConfig.public.name
</script>
  • package.json 文件包含了应用程序的所有依赖项和脚本
#nuxt#vue
目录