Nuxt 3中引入和使用UnoCSS和shadcn-nuxt

在 Nuxt 3 中引入和使用 UnoCSS 和 shadcn-nuxt。

1. UnoCSS 的引入和配置

1. 首先安装必要的依赖：

npm install -D @unocss/nuxt

2. 在 nuxt.config.ts 中配置：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@unocss/nuxt',
  ],
  unocss: {
    // unocss 配置
    uno: true, // 启用默认预设
    icons: true, // 启用图标
    attributify: true, // 启用属性化模式
    shortcuts: {
      // 自定义快捷方式
      'btn': 'px-4 py-2 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700',
    },
    rules: [
      // 自定义规则
    ],
  }
})

3. 创建 uno.config.ts 文件进行更详细的配置：

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetUno, presetAttributify, presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
  ],
  shortcuts: {
    // 自定义快捷方式
  },
  theme: {
    // 主题配置
    colors: {
      // 自定义颜色
    }
  }
})

2. shadcn-nuxt 的引入和使用

1. 安装 shadcn-nuxt：

npx shadcn-nuxt@latest init

2. 在安装过程中，会提示你选择一些配置选项，按照提示完成配置。

3. 在 nuxt.config.ts 中添加配置：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@unocss/nuxt',
    '@nuxtjs/tailwindcss', // shadcn-nuxt 需要 tailwindcss
    '@nuxtjs/color-mode', // 如果需要暗色模式
  ],
  tailwindcss: {
    // tailwindcss 配置
  },
  colorMode: {
    classSuffix: ''
  }
})

4. 安装组件：

npx shadcn-nuxt@latest add button

5. 使用组件示例：

<template>
  <div>
    <!-- UnoCSS 样式 -->
    <div class="p-4 bg-gray-100">
      <h1 class="text-2xl font-bold">Hello UnoCSS</h1>
    </div>

    <!-- shadcn 组件 -->
    <Button>Click me</Button>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

注意事项：

1. UnoCSS 和 Tailwind CSS 可能会有样式冲突，建议：

// uno.config.ts
export default defineConfig({
  presets: [
    presetUno({
      preflight: false, // 禁用预设样式
    }),
  ],
})

2. 创建全局样式文件：

/* assets/css/global.css */
@import '@unocss/reset/tailwind.css';
/* 其他全局样式 */

3. 在 nuxt.config.ts 中引入全局样式：

export default defineNuxtConfig({
  css: ['~/assets/css/global.css'],
})

4. 组件使用示例：

<!-- pages/index.vue -->
<template>
  <div class="p-4">
    <!-- UnoCSS 样式 -->
    <div class="flex items-center gap-4">
      <div class="i-carbon-sun text-2xl" />
      <h1 class="text-2xl font-bold">Hello</h1>
    </div>

    <!-- shadcn 组件 -->
    <Button variant="outline" class="mt-4">
      Click me
    </Button>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

5. 如果需要使用暗色模式：

// nuxt.config.ts
export default defineNuxtConfig({
  colorMode: {
    classSuffix: '',
    preference: 'system', // 默认主题
    fallback: 'light', // 回退主题
  }
})

这样就完成了 UnoCSS 和 shadcn-nuxt 的基本配置和使用。你可以根据项目需求进行更详细的配置和调整。