最清晰的一版本：UnoCSS安装+配置

1.安装依赖

//一次性安装UnoCSS
pnpm install -D unocss @unocss/preset-wind3 @unocss/preset-icons @unocss/preset-attributify @unocss/preset-typography @unocss/transformer-directives @unocss/transformer-variant-group

//分开安装
# 1. 安装核心包
pnpm install -D unocss

# 2. 安装 presetWind3
pnpm install -D @unocss/preset-wind3

# 3. 安装 presetIcons
pnpm install -D @unocss/preset-icons

# 4. 安装 presetAttributify
pnpm install -D @unocss/preset-attributify

# 5. 安装 presetTypography
pnpm install -D @unocss/preset-typography

# 6. 安装 transformerDirectives
pnpm install -D @unocss/transformer-directives

# 7. 安装 transformerVariantGroup
pnpm install -D @unocss/transformer-variant-group

2.uno.config.ts配置

import { defineConfig, presetWind3, transformerDirectives, transformerVariantGroup,presetIcons,presetTypography } from "unocss";

export default defineConfig({
   // 内容源：指定要扫描的文件
  content: {
    filesystem: [
    'src/**/*.{vue,js,ts,jsx,tsx}',
    'index.html',
    ],
  },
  //组合式(快捷方式)
  shortcuts: {
  },
  //自定义(样式)
  rules: [
  ],
   //预设(工具与功能)
  presets: [
    //响应设计
    presetWind3({ 
      prefix: "ly-",//类名前缀
      dark: "class",//暗色模式：'class' | 'media'
      variablePrefix: "--ly-",//变量前缀
    }),
    presetIcons(), //图标预设
    presetTypography(),//排版预设
  ],
  //转换器(转换器)
  transformers: [
    transformerDirectives(), //指令转换器
    transformerVariantGroup() //变体组转换器
  ],
  // 配置项
  theme: {
    // 颜色
    colors: {
      // 配置项
    },
    //断点配置
    breakpoints: {
      // 配置项
      xs: '480px',   // 超小屏幕：小手机（竖屏）
      sm: '640px',   // 小屏幕：大手机（横屏）、小平板
      md: '768px',   // 中等屏幕：平板（竖屏）
      lg: '1024px',  // 大屏幕：平板（横屏）、小笔记本
      xl: '1280px',  // 超大屏幕：桌面显示器
     '2xl': '1536px', // 超超大屏幕：大桌面显示器
    },

    //间距
    spacing: {
      // 配置项
    },
    //字体
    fontFamily: {
      // 配置项
    },
    fontSize: {
      // 配置项
    },
    //圆角
    borderRadius: {
      // 配置项
    },
    //阴影
    boxShadow: {
      // 配置项
    },
  },
//安全列表
safelist: [
  // 配置项
],
// 阻止列表
blocklist: [
  // 配置项
],
//预设样式
preflights: [
  // 配置项
],
//变体
variants: [
  // 配置项
],
//layers 图层配置，三个不可少
layers: {
  base: 1,
  components: 2,
  utilities: 3
}
});

3.main.ts导入

import 'virtual:uno.css'  // 导入 UnoCSS 生成的样式