Unocss基本示例使用

下面为您详细介绍 UnoCSS：

一、UnoCSS 概述

UnoCSS 是一个即时原子化 CSS 引擎，由 Vite 团队成员 Anthony Fu 开发。它具有以下特点：

1. 高性能：采用预设扫描和即时生成方式
2. 可定制性强：完全可定制的原子化 CSS 引擎
3. 体积小：按需生成，无需打包未使用的样式
4. 灵活：支持属性化模式、纯 CSS 图标等特性

二、核心特性

1. 预设系统：

// vite.config.js
import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'
import { presetUno, presetAttributify, presetIcons } from 'unocss'

export default defineConfig({
  plugins: [
    UnoCSS({
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()
      ]
    })
  ]
})

2. 规则定制：

rules: [
  ['custom-rule', { color: '#000' }],
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d}px` })],
]

3. 快捷方式：

shortcuts: {
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  'btn-green': 'text-white bg-green-500 hover:bg-green-700'
}

三、使用场景

1. Vite 项目

• Vue 3 项目
• React 项目
• Solid.js 项目
• Svelte 项目

2. 需要高性能的场景

• 大型应用
• 对构建速度有要求的项目

3. 需要高度自定义的场景

• 自定义设计系统
• 特殊样式需求

四、实战案例

1. 基础样式使用：

<div class="p-4 m-2 text-center bg-blue-500 text-white">
  Hello UnoCSS
</div>

2. 响应式设计：

<div class="sm:text-left md:text-center lg:text-right">
  响应式文本对齐
</div>

3. 使用属性化模式：

<button 
  bg="blue-400 hover:blue-500"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Submit
</button>

4. 自定义图标使用：

<div class="i-carbon-airplay text-3xl"/>
<div class="i-mdi-account text-red"/>

5. 动画效果：

<div class="animate-bounce animate-duration-2s">
  弹跳动画
</div>

五、进阶使用

1. 主题配置：

theme: {
  colors: {
    'primary': '#3f51b5',
    'secondary': '#2196f3'
  },
  breakpoints: {
    'xs': '320px',
    'sm': '640px'
  }
}

2. 变体配置：

variants: [
  (matcher) => {
    if (!matcher.startsWith('hover:')) return matcher
    return {
      // 处理 hover 变体
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  }
]

3. 自定义预设：

definePreset({
  name: 'my-preset',
  rules: [
    // 自定义规则
  ],
  shortcuts: {
    // 自定义快捷方式
  },
  variants: [
    // 自定义变体
  ]
})

六、最佳实践

1. 项目组织

├── uno.config.ts    # UnoCSS 配置文件
├── src/
│   ├── styles/
│   │   ├── main.css    # 全局样式
│   │   └── themes/     # 主题相关

2. 配置示例：

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

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons()
  ],
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'input': 'border rounded px-2 py-1 outline-none focus:ring-2'
  },
  theme: {
    colors: {
      brand: {
        primary: '#4f46e5',
        secondary: '#7c3aed'
      }
    }
  },
  rules: [
    ['custom-grid', { display: 'grid', 'grid-template-columns': 'repeat(auto-fit, minmax(250px, 1fr))' }]
  ]
})

七、性能优化建议

1. 使用预构建

• 开发环境使用 UnoCSS 的开发服务器
• 生产环境预构建 CSS

2. 合理使用预设

• 按需引入预设
• 避免引入不必要的预设

3. 缓存策略

• 利用浏览器缓存
• 使用构建工具的缓存功能

八、注意事项

1. 类名冲突

• 避免与其他 CSS 框架冲突
• 使用特定前缀区分

2. 浏览器兼容性

• 注意新特性的兼容性支持
• 合理使用 polyfill

3. 开发工具

• 使用 VS Code 插件提升开发体验
• 配置代码提示和自动完成

PS： UnoCSS 作为新一代原子化 CSS 引擎，在性能和灵活性上都有出色表现。它特别适合现代前端开发，尤其是使用 Vite 构建的项目。通过合理配置和使用，可以极大提升开发效率和应用性能。当然，个人用户开发者在开发网络项目时候可以去找找相关UI库复制黏贴很舒服的。