中文官网 https://www.nuxt.com.cn/docs/getting-started/installation
Nuxt 的优势
- 上手即可编写.vue文件
- 根据 pages 目录自动生成路由
- 自动代码拆分,减少应用程序的初始加载时间。
- 内置服务器端渲染能力(默认启用),无需自己设置单独的服务器。
- 自动导入各自目录中编写的Vue组件和可组合函数
- 自动生成 TS 类型和 tsconfig.json 配置文件,无需学习TypeScript 也能编写类型安全的代码
- 默认使用 Vite 来支持开发中的热模块替换(HMR)
- 提供了可用于处理与服务器端渲染兼容的数据获取的可组合函数,以及不同的策略。
Nuxt 的渲染模式
创建项目,启动项目,访问项目
目录结构
Nuxt 有严格的目录结构规范,请按此规范组织代码:
内置的自动导入
- Vue 3 的官方 API 都已自动导入,如 ref,computed 等。
- components 目录中的组件,都已自动导入为全局组件
- composables 目录中的组合式函数,都已自动导入为全局组合式函数
- utils 目录中的工具函数,都已自动导入为全局工具函数
- server/utils 目录中的导出的工具函数和变量,在 server 目录中可直接使用
显式自动导入
Nuxt使用 #imports
指代所有自动导出的内容,可使用它来使导入变得显式
禁用自动导入组合式函数和实用函数
nuxt.config.ts
禁用自动导入组件
nuxt.config.ts
内置的组合式函数
内置的工具函数
布局
页面 vs 自动路由(含路由管理)
组件
标题模板
可以使用 titleTemplate 选项来提供一个动态模板,以自定义站点的标题,例如在每个页面的标题中添加站点名称。
titleTemplate 可以是一个字符串,其中 %s 会被标题替换,也可以是一个函数(为函数时,不能在 nuxt.config 中设置,而是建议在 app.vue 文件中设置,这样它将适用于你站点上的所有页面)。
动态标题
设置元数据
布局中 layouts/default.vue
页面中
资源引用 vs 添加样式
获取数据(网络请求)
状态管理
Nuxt 使用 useState 实现,也可使用第三方库,如 Pinia
页面内共享状态
定义状态
其他组件中使用
全局共享状态
composables/states.ts
任意页面中使用
过渡效果
项目配置 nuxt.config.ts
错误处理
https://www.nuxt.com.cn/docs/getting-started/error-handling
类型检查
启用类型检查
安装 vue-tsc 和 typescript
运行 nuxi typecheck
构建时启用类型检查(nuxt.config.ts 中)
启用严格的类型检查(nuxt.config.ts 中)
Nuxt 生命周期
Nuxt 新增了一些生命周期实现更精准的控制,详见 官网
部署
https://www.nuxt.com.cn/docs/getting-started/deployment
升级 Nuxt