【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>
   
   

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