Nuxt 3 作弊表

特点

• 支持 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 的优点

创建项目

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

自动导入

Nuxt API 自动导入

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

Vue API 自动导入

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

自动导入目录

• components
• composables
• utils

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

server 目录

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

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

显式导入

  import { ref, computed } from '#imports'

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

模块

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 模块可以

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
• .output
• assets
• components
• composables
• content
• layouts
• middleware
• modules
• pages
• plugins
• public
• server
• utils
• .env
• .gitignore
• .nuxtignore
• app.config.ts
• app.vue
• nuxt.config.ts
• package.json
• tsconfig.json

生命周期

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 */
     })
})

未完待续……