特点

支持 Node 16 或更新的偶数版本
推荐使用 VSCode + Volar 插件（开启 Take Over 模式接管 TS 代码）+ TypeScript Vue 插件
支持文件路由和 API 路由
支持自动导入
集成 Vue 3
支持服务端渲染（含水合）、客户端渲染、混合渲染（每个路由单独选择渲染模式）和边缘渲染（支持 Deno、Cloudflare、Vercel 和 Netlify）
Nuxt 3 的服务器引擎叫做 Nitro，支持自动 code-splitting 和自动异步加载
Nitro 使用 h3 来实现中间件

比 Nuxt 2 的优点

性能更好
支持 Composition API
支持 TypeScript
更小的 bundle（更多的 tree-shaking）
服务器运行不需要执行 nuxt start，打包代码自带运行时。

创建项目

pnpm dlx nuxi@latest init 项目名
code 项目名
pnpm install
pnpm dev -o

自动导入

Nuxt API 自动导入

<script setup>
  /* useAsyncData() 和 $fetch() 会自动导入 */
  const { data, refresh, pending } = 
    await useAsyncData('/api/hello', () => $fetch('/api/hello'))
</script>

Vue API 自动导入

<script setup>
  /* ref() and computed() are auto-imported */
  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>

自动导入目录

components
composables
utils

这些目录中的文件会被自动导入。

server 目录

Nuxt 会自动扫描这些目录中的文件

~/server/api
~/server/routes
~/server/middleware

每个文件都要导出 defineEventHandler 或者 eventHandler 函数。

显式导入

<script setup>
  import { ref, computed } from '#imports'

  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>

模块

Nuxt 3 模块现在只在 build 时使用，因此 Nuxt 2 中的 buildModules 已被弃用，统一使用 modules 即可。

export default defineNuxtConfig({
  modules: [
    // 外部模块
    '@nuxtjs/example',

    // 本地模块
    './modules/example',

    // 模块 + 选项
    ['./modules/example', { token: '123' }]

    // 内联模块
    async (inlineOptions, nuxt) => { }
  ]
})

创建模块

npx nuxi init -t module 模块名

这会创建一个单独的模块项目。

查找模块

打开 nuxt.com/modules 搜索即可。

模块定义

一个 Nuxt 模块可以

一个函数或者一个异步函数，它接受用户选项和一个 nuxt 对象作为参数：

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule((inlineOptions, nuxt) => {
  // You can do whatever you like here..
  console.log(inlineOptions.token) // `123`
  console.log(nuxt.options.dev) // `true` or `false`
  nuxt.hook('ready', async nuxt => {
    console.log('Nuxt is ready')
  })
})

一个对象（推荐）：

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nuxtjs/example',
    configKey: 'sample',
    compatibility: {
      nuxt: '^3.0.0'
    }
  },
  defaults: {}, // 可以是函数
  hooks: {}, // 注册钩子
  setup(moduleOptions, nuxt) { // 这里跟上面的函数形式的模块的功能一样
    // ...
  }
})

已发布的模块无法利用运行时目录中的自动导入功能，必须从 #imports 或类似的位置显式导入。

额外的工具

@nuxt/module-builder
@nuxt/kit
@nuxt/test-utils

目录结构

生命周期

Nuxt Hooks (Build Time)

完整列表：Nuxt Hooks

export default defineNuxtConfig({
  hooks: {
    'close': () => { }
  }
})

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('close', async () => { })
  }
})

App Hooks (Runtime)

完整列表：App Hooks

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('page:start', () => {
        /* your code goes here */
     })
})

未完待续……

Nuxt 3 作弊表

特点