【Vue】Vue 中使用 UnoCSS 插件

一、安装依赖

1. 核心包安装
   使用包管理器（如pnpm/npm/yarn）安装UnoCSS及其常用预设：

   pnpm add -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons
   

   • unocss：unocss 插件
   • @unocss/preset-uno：提供类似Tailwind的原子类预设
   • @unocss/preset-attributify：支持属性化模式（如<div text-red>）
   • @unocss/preset-icons：图标库支持

---

二、配置Vite插件

2. 修改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()]
   })
   

   若需自定义配置文件路径，可通过configFile参数指定。

---

三、创建UnoCSS配置文件

图标集成
以 https://icones.js.org/collection/ic 为例：

安装图标库：

pnpm add -D @iconify-json/ic// 这里的 ic 刚好对应了 https://icones.js.org/collection/ic 的最后路径参数

通过i-{集合}:{图标名}语法直接调用。
3. 新建uno.config.ts
在项目根目录创建配置文件，定义规则、预设及快捷方式：

 import {defineConfig, presetUno, presetAttributify, presetIcons} from 'unocss'export default defineConfig({presets: [presetUno(), // 默认原子类预设presetAttributify(), // 属性模式支持presetIcons(), // 图标库支持],rules: [// 自定义静态规则['color-red', {color: 'red'}],// 动态规则（正则匹配）[/^text-(\d+)px$/, ([_, num]) => ({fontSize: `${num}px`})]],shortcuts: {'flex-center': 'flex justify-center items-center', // 组合类快捷方式}})

动态规则支持通过正则表达式生成响应式样式（如text-16px→font-size:16px）。

---

四、引入样式文件

4. 在入口文件导入
   在main.ts中引入虚拟CSS文件：

   import 'virtual:uno.css'
   

   此文件由UnoCSS插件动态生成，包含所有原子类样式。

---

五、使用原子类

5. 在组件中应用

    <template><!-- 使用预设 (比如支持 tailwindcss) presetUno --><div class="p-4 bg-gray-100"><h1 class="text-xl text-blue-500">Hello UnoCSS</h1></div><!-- 属性模式 presetAttributify --><div text-red text-20px>属性化写法</div><!-- 自定义静态和动态规则 --><div class="color-red text-4.5">自定义规则</div><!-- 快捷方式 --><div class="flex-center">居中</div><!--  使用图标库 presetIcons --><!--  通过i-{集合}:{图标名}语法直接调用图标库 --><div class="i-ic-baseline-10k"/></template>

   • 支持传统类名、属性化语法及自定义快捷类