vue3结合unocss样式原子化

1. 安装unocss

npm i -D unocss

2. main.ts引入

import 'uno.css'

3.vite.config.js

import unoCss from "unocss/vite"
import {presetIcons,presetAttributify,presetUno} from 'unocss'

export default defineConfig({
  plugins: [
  // 配置 unocss 
    unoCss({
      // 手动配置的预设
      presets:[presetIcons(),presetAttributify(),presetUno()],
      rules: [
        ["flex", { display: "flex" }],
        ["red", { color: "red" }],
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
      ],
      // 自定义组合样式
      shortcuts: {
        bgc: "flex red",
      },
    })
  ]
})

4. presetIcons()预设,图标集合安装,图标库地址: icones.js.org/

npm i -D @iconify-json/ic

示例:

<div class="i-ic-baseline-add-alarm"></div>

5.presetUno 工具类预设

• 一系列流行的原子化框架的 通用超集，包括了 Tailwind CSS，Windi CSS，Bootstrap，Tachyons 等。

  • 例如，ml-3（Tailwind），ms-2（Bootstrap），ma4（Tachyons），mt-10px（Windi CSS）均会生效。