UnoCSS 的作用与特点

UnoCSS 与其他 CSS 框架的区别

以下是 Vue 3 项目中使用 UnoCSS 的详细教程：

1. 安装 UnoCSS

在 Vue 3 项目中使用 Vite 工具链时，执行以下命令安装 UnoCSS：

npm install unocss -D

或使用 Yarn：

yarn add unocss

2. 配置 UnoCSS

2.1 创建配置文件 uno.config.ts

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

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

export default defineConfig({
  // 使用预设
  presets: [
    presetUno(), // 默认预设，类似 TailwindCSS
    presetIcons(), // 图标支持
    presetAttributify(), // 属性模式支持
  ],
  shortcuts: {
    // 快捷方式定义
    'btn': 'px-4 py-2 rounded bg-blue-500 text-white',
    'icon-btn': 'text-lg p-1 hover:bg-gray-100 rounded-full cursor-pointer',
  },
  rules: [
    // 自定义规则
    ['red-text', { color: 'red' }],
    ['blue-bg', { background: 'blue' }],
  ],
});

2.2 添加 UnoCSS 插件到 Vite 配置

在 vite.config.ts 文件中引入 UnoCSS 插件：

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

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

2.3 引入样式

在 main.ts 或 main.js 文件中引入 UnoCSS 样式：

import { createApp } from 'vue';
import App from './App.vue';
import 'uno.css'; // 引入 uno.css 样式

createApp(App).mount('#app');

3. 使用 UnoCSS

3.1 基础用法

<template>
  <div class="p-4 bg-gray-100 rounded-lg">
    <h1 class="text-2xl font-bold text-blue-500">Hello UnoCSS!</h1>
    <button class="btn mt-4">按钮</button>
  </div>
</template>

3.2 使用快捷方式

<template>
  <div>
    <button class="btn">快捷按钮</button>
    <i class="icon-btn i-mdi:home"></i>
  </div>
</template>

解释：

• btn: 使用 shortcuts 配置的快捷样式（定义于 uno.config.ts）。
• i-mdi:home: 使用 presetIcons 提供的 Material Design 图标。

3.3 属性模式（Attributify Mode）

<template>
  <div p="4" bg="gray-100" rounded="lg">
    <h1 text="2xl blue-500">Hello Attributify Mode</h1>
  </div>
</template>

使用 presetAttributify 可以将类名语法改为属性写法，代码更简洁。

3.4 自定义规则和动态值

示例：支持动态宽度与颜色

rules: [
  ['w-\\[([0-9]+)px\\]', ([, d]) => ({ width: `${d}px` })], // 动态宽度规则
  ['custom-text', { color: 'purple', fontSize: '20px' }], // 自定义规则
],

, 

使用：

<div class="w-[200px] custom-text">动态宽度 + 自定义样式</div>

4. 高级功能

4.1 使用动态图标库

支持 SVG 图标库，例如 mdi 图标：

<i class="i-mdi:home text-blue-500 text-2xl"></i>
<i class="i-carbon:alarm text-red-500 text-3xl"></i>

4.2 兼容 Tailwind CSS 的语法

UnoCSS 支持与 Tailwind CSS 类似的工具类语法：

<div class="flex items-center justify-between p-4 bg-gray-200 rounded-lg">
  <span class="text-lg font-bold text-gray-800">Tailwind 风格</span>
</div>

4.3 使用条件样式

<div class="hover:bg-blue-500 hover:text-white focus:ring-2 focus:ring-blue-400">
  条件样式
</div>

4.4 支持深色模式

<div class="dark:bg-gray-800 dark:text-white p-4">
  深色模式
</div>

5. 常见问题

1. Error: Entry module not found.

   • 确保在 main.ts 中已引入：

     import 'uno.css';
     

2. 样式无效？

   • 检查 Vite 配置文件是否已正确引入插件：

     import UnoCSS from 'unocss/vite';
     plugins: [UnoCSS()]
     

3. 热更新样式不生效？

   • 配置 Vite：

     server: {
       hmr: {
         overlay: false, // 禁用错误覆盖
       },
     },
     

6. 总结

UnoCSS 提供了一套简洁、按需加载和高性能的样式框架，兼容 Tailwind CSS，同时提供更灵活的配置和自定义规则，非常适合现代 Vue 3 项目。

推荐场景：

• 需要高性能、按需生成样式的项目。
• 喜欢类似 TailwindCSS 工具类写法的开发者。
• 需要高度自定义的 CSS 方案。