nuxt + nuxt ui + nuxt i18n

1. 安装必要的依赖

在开始之前，你需要确保所有必要的依赖都安装正确，以下是你的 Nuxt 项目需要的依赖：

# 安装 Nuxt 和 UI 相关依赖
npm install @nuxt/ui

# 安装 Nuxt i18n（用于多语言支持）
npm install @nuxtjs/i18n

# 安装 @nuxtjs/color-mode（用于主题切换）
npm install @nuxtjs/color-mode

# 安装 Tailwind CSS（用于响应式布局）
npm install -D tailwindcss postcss autoprefixer

# 安装 TypeScript 构建模块（如果你使用 TypeScript）
npm install --save-dev @nuxt/typescript-build

确保你已经安装了这些依赖 ，如果你不需要 TypeScript，可以忽略 @nuxt/typescript-build。

2. 配置 nuxt.config.js

根据你的需求，更新配置如下：

export default {
  css: ['@/assets/css/tailwind.css'], // Tailwind CSS 样式

  buildModules: [
    '@nuxt/typescript-build', // 如果你使用 TypeScript
    '@nuxtjs/tailwindcss', // 处理 Tailwind CSS
    '@nuxtjs/color-mode', // 处理主题切换
  ],

  plugins: [
    // 你可以在这里添加任何插件
  ],

  i18n: {
    strategy: 'prefix_and_default',
    locales: [
      {
        code: 'en',
        name: 'English',
        iso: 'en-US',
        file: 'en-US.json',
      },
      {
        code: 'zh',
        name: '中文',
        iso: 'zh-CN',
        file: 'zh-CN.json',
      },
      // 如果有其他语言，可以继续添加
      {
        code: 'fr',
        name: 'Français',
        iso: 'fr-FR',
        file: 'fr-FR.json',
      },
    ],
    lazy: true,
    langDir: 'lang/', // 存放语言文件的目录
    defaultLocale: 'en', // 默认语言
  },

  colorMode: {
    classSuffix: '', // 去除默认的class后缀
  },
}

3. Tailwind CSS 配置

在根目录下运行以下命令来初始化 Tailwind 配置：

npx tailwindcss init

然后在 tailwind.config.js 中进行配置：

module.exports = {
  content: [
    './pages/**/*.{js,ts,vue}',
    './components/**/*.{js,ts,vue}',
    './layouts/**/*.{js,ts,vue}',
  ],
  theme: {
    extend: {
      colors: {
        // 自定义颜色，支持多个主题
        lightBackground: '#ffffff',
        darkBackground: '#121212',
        primary: '#ff5722',
        secondary: '#795548',
        // 更多主题颜色可以在这里添加
      },
    },
  },
  plugins: [],
}

4. 主题切换支持多个主题

假设你有多个主题，修改 assets/css/tailwind.css 来实现不同的主题样式。我们可以创建一个类似于以下的配置：

/* assets/css/tailwind.css */

@layer base {
  /* 默认 light 主题 */
  .light {
    --bg-color: #ffffff; /* 白色背景 */
    --text-color: #000000; /* 黑色文字 */
  }

  /* dark 主题 */
  .dark {
    --bg-color: #121212; /* 黑色背景 */
    --text-color: #ffffff; /* 白色文字 */
  }

  /* 其他自定义主题，例如 blue 主题 */
  .blue-theme {
    --bg-color: #e3f2fd; /* 蓝色背景 */
    --text-color: #0d47a1; /* 深蓝文字 */
  }

  /* 可以继续为每个主题添加样式 */
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

5. 切换主题的实现

在布局或组件中，你可以使用 @nuxtjs/color-mode 提供的 API 来切换主题。以下是一个例子：

<template>
  <div>
    <button @click="toggleTheme">切换主题</button>
    <h1>{{ $t("welcome") }}</h1>
  </div>
</template>

<script setup>
import { useColorMode } from '@nuxtjs/color-mode'

const { value, toggle } = useColorMode()

// 添加自定义主题切换逻辑
const toggleTheme = () => {
  if (value === 'light') {
    useColorMode().set('blue-theme');  // 切换到蓝色主题
  } else if (value === 'blue-theme') {
    useColorMode().set('dark');  // 切换到暗色主题
  } else {
    useColorMode().set('light');  // 切换到默认亮色主题
  }
}
</script>

6. 多语言支持

你可以在 lang 文件夹中存放不同语言的 JSON 文件。例如：

• lang/en-US.json:

{
  "welcome": "Welcome to our website!"
}

• lang/zh-CN.json:

{
  "welcome": "欢迎来到我们的网站!"
}

• lang/fr-FR.json:

{
  "welcome": "Bienvenue sur notre site Web!"
}

7. 布局（Layouts）

你可以在 layouts/default.vue 文件中设置布局和主题：

<template>
  <div :class="colorMode">
    <NuxtPage />
  </div>
</template>

<script setup>
import { useColorMode } from '@nuxtjs/color-mode'

const { value: colorMode } = useColorMode()
</script>

8. 运行和调试

完成配置后，运行你的 Nuxt 项目：

npm run dev

访问页面时，你可以切换主题和语言，确保所有功能正常工作。

---

目录结构

my-nuxt-site/
├── assets/
│   └── css/
│       └── tailwind.css
├── lang/
│   ├── en-US.json
│   ├── zh-CN.json
│   └── fr-FR.json
├── components/
│   └── ThemeSwitcher.vue
├── layouts/
│   └── default.vue
├── pages/
│   └── index.vue
├── nuxt.config.js
├── tailwind.config.js
└── package.json

---