# nuxt3_study

**Repository Path**: gitee_lw/nuxt3_study

## Basic Information

- **Project Name**: nuxt3_study
- **Description**: 学习nuxt3
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-28
- **Last Updated**: 2024-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 文档地址

英文文档：https://nuxt.com/docs/guide/directory-structure/middleware 。建议阅读英文官网，中文官网有些没更新

中文文档：https://nuxt.com.cn/docs/guide/directory-structure/layouts

### 安装

npx nuxi@latest init <project-name>

### 项目目录结构

https://nuxt.com.cn/docs/guide/directory-structure/layouts

### 理解

是服务端渲染和单页应用框架的结合。很多地方的代码会在服务端和客户端各执行一次，编写逻辑时要考虑所在环境

### 路由

https://nuxt.com.cn/docs/guide/directory-structure/pages#%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1

约定式路由，，路由权限校验通过 middleware，跳转通过 navigateTo，当然 router 也可以，但是 navigateTo 两端都通用

### definePageMeta

https://nuxt.com.cn/docs/api/utils/define-page-meta

### 什么时候会处于服务端环境

当浏览器刷新或者说首屏加载时

### 网络请求

useFetch 是一个可组合函数，可以直接在设置函数、插件或路由中调用。它返回响应式的可组合函数，并处理将响应添加到 Nuxt 的负载中，以便在页面水合时可以从服务器传递给客户端，而无需在客户端重新获取数据，因此当两端都执行请求时，使用 useFetch 不会跨域。

如果是在服务端会执行的地方发送请求，使用 useFetch；只单纯在客户端请使用$fetch，此时需要考虑跨域问题。

页面初始时能用 useFecth 里的 data 渲染的页面就尽量使用，因为这是服务端渲染，更快，seo 更好，也是使用 nuxt 框架的原因，而不是说所有数据都用$fetch 获取然后再用 vue.ref 去赋值渲染，这样就是单纯的客户端渲染了

### 全局状态共享

通过 useSate 实现，https://nuxt.com.cn/docs/getting-started/state-management

### 部署

本地：npm run build 后，执行 node .output/server/index.mjs，启动服务

linux： dokcerfile

```
   # 使用官方Node.js镜像作为基础镜像
   FROM node:16-alpine AS build

   # 设置工作目录
   WORKDIR /usr/src/app

   # 安装项目依赖
   COPY package*.json ./
   RUN npm ci --only=production

   # 复制源代码到容器中
   COPY . .

   # 生成生产环境的构建（如果适用）
   RUN npm run build

   # 使用另一个官方无构建工具的Node.js镜像作为运行时镜像
   FROM node:16-alpine

   WORKDIR /usr/src/app

   # 将之前构建阶段的成果复制到新的镜像中
   COPY --from=build /usr/src/app/node_modules ./node_modules
   COPY --from=build /usr/src/app/dist ./dist

   # 暴露应用端口
   EXPOSE 3000

   # 定义启动命令
   CMD [ "npm", "start" ]
```

构建镜像 docker build -t <your-image-name> .