中文官网 https://www.nuxt.com.cn/docs/getting-started/installation
Nuxt 的优势
- 上手即可编写.vue文件
- 根据 pages 目录自动生成路由
- 自动代码拆分，减少应用程序的初始加载时间。
- 内置服务器端渲染能力（默认启用），无需自己设置单独的服务器。
- 自动导入各自目录中编写的Vue组件和可组合函数
- 自动生成 TS 类型和 tsconfig.json 配置文件，无需学习TypeScript 也能编写类型安全的代码
- 默认使用 Vite 来支持开发中的热模块替换（HMR）
- 提供了可用于处理与服务器端渲染兼容的数据获取的可组合函数，以及不同的策略。
Nuxt 的渲染模式
https://blog.csdn.net/weixin_41192489/article/details/141326553
创建项目，启动项目，访问项目
https://blog.csdn.net/weixin_41192489/article/details/141253731
目录结构
Nuxt 有严格的目录结构规范，请按此规范组织代码：
https://blog.csdn.net/weixin_41192489/article/details/141256117
内置的自动导入
- Vue 3 的官方 API 都已自动导入，如 ref，computed 等。
- components 目录中的组件，都已自动导入为全局组件
- composables 目录中的组合式函数，都已自动导入为全局组合式函数
- utils 目录中的工具函数，都已自动导入为全局工具函数
- server/utils 目录中的导出的工具函数和变量，在 server 目录中可直接使用
显式自动导入
Nuxt使用 #imports 指代所有自动导出的内容，可使用它来使导入变得显式
import {
ref, computed } from '#imports'
禁用自动导入组合式函数和实用函数
nuxt.config.ts
export default defineNuxtConfig({
imports: {
autoImport: false
}
})
禁用自动导入组件
nuxt.config.ts
export default defineNuxtConfig({
components: {
dirs: []
}
})
内置的组合式函数
https://blog.csdn.net/weixin_41192489/article/details/141316094
内置的工具函数
https://blog.csdn.net/weixin_41192489/article/details/141361105
布局
https://blog.csdn.net/weixin_41192489/article/details/141263942
页面 vs 自动路由（含路由管理）
https://blog.csdn.net/weixin_41192489/article/details/141269185
组件
https://blog.csdn.net/weixin_41192489/article/details/141358992
标题模板
可以使用 titleTemplate 选项来提供一个动态模板，以自定义站点的标题，例如在每个页面的标题中添加站点名称。
titleTemplate 可以是一个字符串，其中 %s 会被标题替换，也可以是一个函数（为函数时，不能在 nuxt.config 中设置，而是建议在 app.vue 文件中设置，这样它将适用于你站点上的所有页面）。
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${
titleChunk} - 网站名称` : '网站名称';
}
})
</script>
动态标题
<script setup lang="ts">
useHead({
// 作为字符串，
// 其中`%s`会被标题替换
titleTemplate: '%s - 网站标题',
// ... 或者作为一个函数
titleTemplate: (productCategory) => {
return productCategory
? `${
productCategory} - 网站标题`
: '网站标题'
}
})
</script>
设置元数据
布局中 layouts/default.vue
<script setup lang="ts">
const route = useRoute()
useHead({
meta: [{
property: 'og:title', content: `应用名称 - ${
route.meta.title}` }]
})
</script>
页面中
<script setup lang="ts">
definePageMeta({
title: '某个页面'
})
</script>
资源引用 vs 添加样式
https://blog.csdn.net/weixin_41192489/article/details/141329614
获取数据（网络请求）
https://blog.csdn.net/weixin_41192489/article/details/141348349
状态管理
Nuxt 使用 useState 实现，也可使用第三方库，如 Pinia
页面内共享状态
定义状态
const counter = useState('counter', () => Math.round(Math.random() * 1000))
其他组件中使用
useState('counter')
全局共享状态
composables/states.ts
export const useCounter = () => useState<number>('counter', () => 0)
export const useColor = () => useState<string>('color', () => 'pink')
任意页面中使用
const color = useColor() // 与useState('color')相同
过渡效果
https://blog.csdn.net/weixin_41192489/article/details/141331308
项目配置 nuxt.config.ts
https://blog.csdn.net/weixin_41192489/article/details/141258957
错误处理
https://www.nuxt.com.cn/docs/getting-started/error-handling
类型检查
启用类型检查
安装 vue-tsc 和 typescript
pnpm add -D vue-tsc typescript
运行 nuxi typecheck
npx nuxi typecheck
构建时启用类型检查（nuxt.config.ts 中）
export default defineNuxtConfig({
typescript: {
typeCheck: true
}
})
启用严格的类型检查（nuxt.config.ts 中）
export default defineNuxtConfig({
typescript: {
strict: true
}
})
Nuxt 生命周期
Nuxt 新增了一些生命周期实现更精准的控制，详见官网
部署
https://www.nuxt.com.cn/docs/getting-started/deployment
升级 Nuxt
npx nuxi upgrade