nuxt3基本结构

一般创建的nuxt3项目的目录结构都是少的，需要自己去新建，而且nuxt安装的库也是有些特殊的，比如pinia @pinia/nuxt，具体可以看官方文档，同时nuxt也有支持的库，https://nuxt.com/modules

安装

bash

pnpm create nuxt <project-name>

pnpm create nuxt <project-name>

新建的目录结构

plaintext

├── assets      # 静态资源
├── components  # 组件
├── layouts     # 布局
├── middleware  # 中间件
├── pages       # 页面
├── plugins     # 插件
├── public      # 静态资源
├── store       # 状态管理
├── utils       # 工具函数

├── assets      # 静态资源
├── components  # 组件
├── layouts     # 布局
├── middleware  # 中间件
├── pages       # 页面
├── plugins     # 插件
├── public      # 静态资源
├── store       # 状态管理
├── utils       # 工具函数

可以直接放到根目录，也可以放到src目录下，若是src目录下，需要在nuxt.config.ts中配置：

typescript

export default defineNuxtConfig({
  srcDir: 'src'
})

export default defineNuxtConfig({
  srcDir: 'src'
})

路由配置

不需要自己配置路由，nuxt会根据文件结构自动生成路由

bash

pages/
  index.vue         →  /
  about.vue         →  /about
  posts/
    index.vue       →  /posts
    [id].vue        →  /posts/123

pages/
  index.vue         →  /
  about.vue         →  /about
  posts/
    index.vue       →  /posts
    [id].vue        →  /posts/123

nuxt运行环境

nuxt有分客户端和服务端，nuxt是运行在nodejs环境中的

特性	客户端	服务端
运行环境	浏览器	Node.js
主要职责	交互、DOM 操作	HTML 渲染、数据预加载
生命周期钩子	`onMounted`、`onUnmounted`	`useAsyncData`、`defineNuxtPlugin`
可用 API	`window`,`localStorage`	`process.server`,`useServerRequest`
是否能访问 DOM	可以	不可以

nuxt3基本结构 ​

安装 ​

新建的目录结构 ​

路由配置 ​

nuxt运行环境 ​

nuxt3基本结构

安装

新建的目录结构

路由配置

nuxt运行环境