前言：本文所用主要库仅为vite, vue, unocss，所写代码均参考UnoCSS中文文档 编写，运行无误。

2023-11-16更新：新加入插件推荐，添加更多常规使用举例、参考文档

---

1.搭建环境

首先，请确保您的node版本≥16

看官方文档的时候，我有注意到UnoCSS对vite做了集成，本着我对vite的良好印象，我就选vite做服务吧:D
UnoCSS中文Vite集成文档
(2023-11-16更新：UnoCss官方文档…有点一言难尽，我更推荐阅读和查询Tailwind Css，根本思想是相同的)

第一步，使用 npm create vite 在某空文件夹创建项目，我选用了Vue+JS，JS可以换成TS也行，没有影响。

第二步，cd xxx(新建项目) 并 npm i
第三步，在项目文件夹下npm install -D unocss
（包安装完毕，下面就是引入和配置环节）

2.修改配置

2-1.修改vite.config.js
加入 import UnoCSS from ‘unocss/vite’
以及修改 plugins: [vue(), UnoCSS()],
2-2.创建uno.config.ts并写入下面代码
rules和presetIcons分别涉及匹配规则和图标表情引入，后面会说

// uno.config.ts
import {
    defineConfig,
    presetAttributify,
    presetIcons,
    presetTypography,
    presetUno,
    presetWebFonts,
    transformerDirectives,
    transformerVariantGroup
  } from 'unocss'
  
  export default defineConfig({
    rules: [
        // ['rotate-0.3', {transform: 'rotate(0.3turn)'}],
        [/^rotate-0.([\.\d]+)$/, ([_, num]) => ({ transform: `rotate(0.${num}turn)` })],
    ],
    shortcuts: [
      // ...
    ],
    theme: {
      colors: {
        // ...
      }
    },
    presets: [
      presetUno(),
      presetAttributify(),
      /*presetIcons({
        collections: {
            carbon: () => import('@iconify-json/twe')
        }
      }),*/
      presetTypography(),
      presetWebFonts({
        fonts: {
          // ...
        }
      })
    ],
    transformers: [transformerDirectives(), transformerVariantGroup()]
  })

2-3.在src/main.js(或main.ts)中加入

import 'virtual:uno.css'

3.代码实践

到这里可以 npm run dev并 打开浏览器啦

3-1.常规使用

由于UnoCSS是即时且按需渲染加载css的，意味着我们不需要花费大量心血去写样式，直接代码中写 class="xx-yy"即可，届时会在网页打开前生成对应的css代码，xx指代属性，yy指代数值，例如在App.vue template 首个div下中加入

<h1 class="mb-300px rotate-0.3">hahahahahha</h1>
<h1 class="mb-300px rotate-0.5">hahahahahha</h1>

其中 mb-300px是官方提供的预设规则，意为margin-bottom: 300px；而rotate-0.5是我写的自定义规则，在uno.config.ts中rules选项有写。
又因为UnoCSS是原子化的，理论上想完成一个复杂样式是得class=‘1 2 3 4 5 6…’

3-1-1 更多的常规使用举例

flex

flex flex-col justify-start items-center

after before

before:inline-block before:w-22px before:h-22px
after:bg-[url(@images/close.svg)]

媒体查询

md:hidden lt-md:mt-40px

@media (min-width: 768px) {
  .md\:hidden {
    display: none;
  }
}
@media (max-width: 767.9px) {
  .lt-md\:mt-40px {
    margin-top: 40px;
  }
}

详情请看 TailwindCss

字体相关

font-400 text-16px leading-16px color-#333(text-#333)
对应 font-weight: 400; font-size: 24px; line-height: 16px; color: #33

字体相关

font-400 text-16px leading-16px color-#333(text-#333)
对应 font-weight: 400; font-size: 24px; line-height: 16px; color: #33

shadow & background

shadow-[0_20px_20px_rgba(0,59,180,0.2)]
bg-gradient-to-r from-[#06DACC] to-#145CF0
bg-[url(@images/main-bg.jpg)]
bg-[rgba(34,42,65,.9)] bg-center bg-cover bg-no-repeat

3-2.使用图标icon或者表情包emoji

我用的是推特emoji，在项目文件夹终端输入npm i -D @unocss/preset-icons @iconify-json/twemoji
然后取消注释uno.config.ts下presetIcons内容

      presetIcons({
        collections: {
            carbon: () => import('@iconify-json/twe')
        }
      }),

之后再在App.vue中加入

<div style="font-size: 40px;">
  <div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy"></div>
</div>

此时网页上会出现个表情，移动上去会变脸。

4.插件推荐&&个人使用体验

插件推荐-VS Code

非常好用，使用效果如下图，hover类名出现详细解释。

个人使用体验
从个人开发上，切实降低了开发心智负担，简单样式不用一遍遍重复写，复杂的样式共用部分可以自定义；也不用手写style，来回切类看是什么问题；为了一点简单样式给某些类取名等等等等。
同时可以用 | 切割类，区分不同屏幕，方便做响应式。