中文官网  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 指代所有自动导出的内容，可使用它来使导入变得显式

import { ref, computed } from '#imports'
  • 1.

禁用自动导入组合式函数和实用函数

nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

禁用自动导入组件

nuxt.config.ts

export default defineNuxtConfig({
  components: {
    dirs: []
  }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

内置的组合式函数


内置的工具函数


布局


页面 vs 自动路由（含路由管理）


组件


标题模板

可以使用 titleTemplate 选项来提供一个动态模板，以自定义站点的标题，例如在每个页面的标题中添加站点名称。

titleTemplate 可以是一个字符串，其中 %s 会被标题替换，也可以是一个函数（为函数时，不能在 nuxt.config 中设置，而是建议在 app.vue 文件中设置，这样它将适用于你站点上的所有页面）。

<script setup lang="ts">
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - 网站名称` : '网站名称';
  }
})
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

动态标题

<script setup lang="ts">
useHead({
  // 作为字符串，
  // 其中`%s`会被标题替换
  titleTemplate: '%s - 网站标题',
  // ... 或者作为一个函数
  titleTemplate: (productCategory) => {
    return productCategory
      ? `${productCategory} - 网站标题`
      : '网站标题'
  }
})
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

设置元数据

布局中 layouts/default.vue

<script setup lang="ts">
const route = useRoute()

useHead({
  meta: [{ property: 'og:title', content: `应用名称 - ${route.meta.title}` }]
})
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

页面中

<script setup lang="ts">
definePageMeta({
  title: '某个页面'
})
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

资源引用 vs 添加样式


获取数据（网络请求）


状态管理

Nuxt 使用 useState 实现，也可使用第三方库，如  Pinia

页面内共享状态

定义状态

const counter = useState('counter', () => Math.round(Math.random() * 1000))
  • 1.

其他组件中使用

useState('counter')
  • 1.

全局共享状态

composables/states.ts

export const useCounter = () => useState<number>('counter', () => 0)
export const useColor = () => useState<string>('color', () => 'pink')
  • 1.
  • 2.

任意页面中使用

const color = useColor() // 与useState('color')相同
  • 1.

过渡效果


项目配置 nuxt.config.ts


错误处理

 https://www.nuxt.com.cn/docs/getting-started/error-handling

类型检查

启用类型检查

安装 vue-tsc 和 typescript

pnpm add -D vue-tsc typescript
  • 1.

运行 nuxi typecheck

npx nuxi typecheck
  • 1.

构建时启用类型检查（nuxt.config.ts 中）

export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

启用严格的类型检查（nuxt.config.ts 中）

export default defineNuxtConfig({
  typescript: {
    strict: true
  }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

Nuxt 生命周期

Nuxt 新增了一些生命周期实现更精准的控制，详见 官网

部署

 https://www.nuxt.com.cn/docs/getting-started/deployment

升级 Nuxt

npx nuxi upgrade
  • 1.