Nuxt3【实用教程】2024最新版

中文官网 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