在 Vue 3 + TS + Vite + TSX 项目中配置 UnoCSS

在 Vue 3 + TS + Vite + TSX 项目中配置 UnoCSS

以下是给你的 Vue 3 + TypeScript + Vite + TSX 项目添加 UnoCSS 支持的完整步骤：

1. 安装 UnoCSS 及其相关依赖

npm install -D unocss @unocss/reset @unocss/vite

2. 配置 vite.config.ts

修改你的 vite.config.ts 文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    UnoCSS(), // 添加 UnoCSS 插件
  ],
})

3. 创建 UnoCSS 配置文件

在项目根目录创建 uno.config.ts 文件：

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetWebFonts,
  presetWind3,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

export default defineConfig({
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetWind3(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

4. 添加 UnoCSS 重置样式

在 main.ts 或 main.js 中导入 UnoCSS 重置样式：

import '@unocss/reset/tailwind.css' // 可以使用其他重置样式，如 normalize.css
import 'uno.css'

5. 配置 TSX 支持 UnoCSS（可不配置）

确保你的 tsconfig.json 包含以下配置：

{
  "compilerOptions": {
    "types": ["unocss/types/global"]
  }
}

6. 在组件中使用 UnoCSS

在 .vue 文件中使用：

<template>
  <div class="p-4 bg-blue-500 text-white rounded">
    UnoCSS in Vue SFC
  </div>
</template>

在 .tsx 文件中使用：

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => (
      <div class="p-4 bg-red-500 text-white rounded">
        UnoCSS in TSX
      </div>
    )
  }
})

7. 可选：配置 VS Code 智能提示

安装 VS Code 的 UnoCSS 扩展

或者在项目根目录创建 .vscode/settings.json：

{
  "unocss.root": ".",
  "unocss.include": [
    "**/*.vue",
    "**/*.ts",
    "**/*.tsx",
    "**/*.js",
    "**/*.jsx"
  ]
}

8. 运行项目

npm run dev

额外配置（按需选择）

图标支持

1. 安装图标依赖：

npm install -D @iconify/json

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

import presetIcons from '@unocss/preset-icons'

export default defineConfig({
  presets: [
    presetIcons({
      scale: 1.2,
      warn: true,
      // 其他选项...
    }),
    // 其他预设...
  ]
})

动画支持

npm install -D @unocss/preset-wind

然后在 uno.config.ts 中使用 presetWind 替代 presetUno。

注意事项

1. UnoCSS 的类名优先级可能与现有 CSS 冲突，可以通过调整 uno.config.ts 中的 layers 配置解决

2. 生产构建时，UnoCSS 会自动提取使用的工具类，无需额外配置

3. 如果遇到类名不生效的问题，检查文件是否被包含在扫描范围内

4. 对于动态类名，可以使用 class 绑定或 class 属性（在 TSX 中）

现在你的项目已经完整支持 UnoCSS 了，可以在 Vue SFC 和 TSX 文件中使用原子化 CSS 工具类了！