【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎

一、概述

1、简介

UnoCSS 是一个轻量级、可扩展和零配置的 CSS 框架，旨在提供简洁、灵活且高效的样式开发体验。它遵循类似于 Tailwind CSS 的原则，通过使用类名来应用样式，从而提供快速而直观的样式编写方式。

UnoCSS 的设计目标是提供最小化的样式，同时保持灵活性和可定制性。它提供了一组基础样式规则和常用的样式变体，如边框、背景、文字、布局等，可以轻松地在项目中使用。

与其他 CSS 框架不同的是，UnoCSS 不包含任何默认主题或设计样式，这使得它非常适合定制化和与现有设计系统的集成。你可以根据项目的需求自由地定义样式和配色方案，以实现完全定制化的外观和风格。

除了基本样式规则外，UnoCSS 还提供了一些可选的预设（presets），如 Uno、Mini、Wind、Attributify、Tagify、Icons、Web Fonts、Typography 和 Rem-to-px。这些预设提供了一些常见的样式和功能，可以根据需要进行选择和集成。

UnoCSS 通过提供零配置的使用方式，使得它非常易于上手和集成到现有项目中。它还支持响应式设计，可以轻松地创建适应不同屏幕尺寸和设备的样式。

总而言之，UnoCSS 是一个简洁、灵活且可定制的 CSS 框架，它以零配置的方式提供了快速而直观的样式开发体验。它的设计使得开发者可以轻松地定制样式，使其适应各种项目需求，并与现有的设计系统无缝集成。

2、官网

官网

https://unocss.dev/

文档

https://unocss.dev/integrations/vite

交互搜索

https://unocss.dev/interactive/

二、基本使用

1、安装

pnpm add -D unocss

2、修改 vite.config.ts

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

3、根目录创建 uno.config.ts

import { defineConfig, presetAttributify, presetUno } from 'unocss';

export default defineConfig({
  /** 排除 */
  exclude: ['node_modules'],
  /** 预设 */
  presets: [
    /** 属性化模式 & 无值的属性模式 */
    presetAttributify(),
    /** 默认预设 */
    presetUno(),
  ],
  /** 自定义规则 */
  rules: [
    ['zb-text', { color: 'blue' }],
    ['zb-fs', { 'font-size': '28px' }],
    ['zb-fb', { 'font-weight': 'bolder' }],
  ],
  /** 自定义快捷方式 */
  shortcuts: {
    'zb-t': 'zb-text zb-fs zb-fb',
  },
});

4、在 main.ts 中引入

import 'virtual:uno.css'

5、VS Code 安装 UnoCSS 插件

6、在组件中使用

<template>
  <div class="zb-text zb-fs zb-fb">UnoCSS</div>
  <div class="zb-t">快捷方式</div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped></style>

7、访问 http://localhost:5173/home

三、预设

https://unocss.dev/presets/

Package	Description
@unocss/preset-uno	默认预设
@unocss/preset-mini	精简但必要的规则和变体
@unocss/preset-wind	Tailwind / Windi CSS 紧凑预设
@unocss/preset-attributify	启用属性化模式以适用其他规则
@unocss/preset-tagify	启用标签化模式以适用其他规则
@unocss/preset-icons	由 Iconify 提供支持的纯 CSS 图标解决方案
@unocss/preset-web-fonts	网页字体支持（Google Fonts 等）
@unocss/preset-typography	排版预设
@unocss/preset-rem-to-px	将 rem 转换为 px 以供实用工具使用