鸭梨公共文档

主题

第 2 章：配置项目基本依赖 ​

1. Vant 配置 ​

1.1 安装依赖 ​

Vant 是一套轻量、可靠的移动端 Vue 组件库，我们将使用它来构建聊天界面。

添加 Vant 的 Nuxt 模块：

bash
pnpm add @vant/nuxt

添加到项目配置 nuxt.config.ts：

ts
export default defineNuxtConfig({
  modules: [
    '@vant/nuxt',
  ],
})

这个模块自动配置了 Vant 的按需引入，无需编写其他配置或编写额外的 import 语句来导入模块。

由于 Vant 是针对移动端定制的，有时我们需要让它兼容桌面端。编写 app/app.vue：

vue
<script setup lang="ts">
import '@vant/touch-emulator'
</script>

<template>
  <div class="h-screen w-full overflow-hidden">
    <NuxtRouteAnnouncer />
    <NuxtLoadingIndicator />
    <van-config-provider>
      <NuxtLayout>
        <NuxtPage
          :page-key="(route) => route.fullPath"
          :keepalive="{ max: 10 }"
        />
      </NuxtLayout>
    </van-config-provider>
  </div>
</template>

Vant 还提供了一些钩子函数，可以先安装以便稍后使用：

bash
pnpm add @vant/use

1.2 样式配置 ​

我们阻止页面由用户缩放，并支持页面过渡动画，配置 nuxt.config.ts：

ts
export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=0',
    },
    layoutTransition: { mode: 'out-in', name: 'layout' },
    pageTransition: { mode: 'out-in', name: 'page' },
  },

  ssr: false,
})

此外，我们还禁止了 SSR，因为我们希望这些页面是仅客户端的。

2. 常见工具 ​

2.1 Pinia 状态管理 ​

安装 Pinia 相关依赖，我们将使用它来管理应用的状态：

bash
pnpm add pinia @pinia/nuxt

添加到项目配置 nuxt.config.ts：

ts
export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
  ],
})

2.2 辅助工具 ​

我们安装常见的工具库，以便稍后使用：

bash
pnpm add @nuxt/icon @nuxtjs/color-mode @vueuse/core @vueuse/integrations @vueuse/nuxt

@nuxt/icon 是 Nuxt 官方提供的图标库，可使用数十万个图标。@nuxtjs/color-mode 是 Nuxt 社区提供的颜色模式插件，可支持适配各种主题。@vueuse/* 是 VueUse 提供的组合式工具库，用于扩展 Vue 3 的功能。

添加到项目配置 nuxt.config.ts：

ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/icon',
    '@nuxtjs/color-mode',
    '@vueuse/nuxt',
  ],
  colorMode: {
    preference: 'system',
    dataValue: 'theme',
    classSuffix: '',
  },
})

2.3 国际化 ​

我们使用 Nuxt i18n 来实现国际化：

bash
pnpm add @nuxtjs/i18n

添加国际化配置：

ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    defaultLocale: 'zh-CN',
    detectBrowserLanguage: {
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',
      useCookie: true,
    },
    locales: [
      {
        code: 'en-US',
        language: 'en-US',
        name: 'English',
        file: 'en-US.yaml',
      },
      {
        code: 'zh-CN',
        language: 'zh-CN',
        name: '简体中文',
        file: 'zh-CN.yaml',
      },
    ],
    lazy: true,
    langDir: 'app/assets/i18n/',
    restructureDir: '.',
    strategy: 'no_prefix',
  },
})

我们首先支持两种语言，英文和简体中文。语言文件存放在 app/assets/i18n/ 目录下，文件名分别为 en-US.yaml 和 zh-CN.yaml。所以需要创建这两个文件。

2.4 其他工具 ​

安装其他常见的工具库：

bash
pnpm add dayjs dayjs-nuxt es-toolkit zod

Day.js 是一个轻量的日期处理库，我们将使用它来处理日期时间。dayjs-nuxt 是 Day.js 的 Nuxt 插件，用于在 Nuxt 中使用 Day.js。es-toolkit 是一个工具库，提供了一些常用的工具函数，可代替 lodash。zod 是一个 TypeScript-first 的验证库，用于验证数据。

添加到项目配置 nuxt.config.ts：

ts
export default defineNuxtConfig({
  modules: [
    'dayjs-nuxt',
  ],
})