vue3项目 引入unocss原子化

unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。

当然，原子样式也有很多选择，最著名的就是 Tailwind。但由于Tailwind 会生成大量样式定义，会导致全量的 CSS 文件往往体积会多至数 MB，从而有性能上有一些不足

• 安装unocss

npm i unocss -S

• 在vite.config.ts 中进行引入

import unoCss from 'unocss/vite'

export default defineConfig({
  plugins: [
    unoCss({
      rules:[
        // 定义了flex，red 即可直接使用 
        ['flex',{display:'flex'}],
        ['red',{color:'red'}]
      ]
    })
  ],

})

• main.ts 中引入

/* .... */

import 'uno.css'

/* .... */

• App.vue 中 使用

<template>
  <div class="flex red">
    unocss
  </div>
</template>

• 在vite.config.ts 中也可以增加一些预设

/**
 * presetIcons: 加载icon图标
 * presetAttributify： 代码中如m-1可以直接写m="1"
 * presetUno： 兼容了tailwindcss，可以直接使用里面的class
 */
import { presetIcons, presetUno, presetAttributify } from 'unocss'

// 用法：

export default defineConfig({
  plugins: [
    unoCss({
      presets:[presetIcons(),presetAttributify(),presetUno()],
      rules:[
        // 定义了flex，red 即可直接使用 
        ['flex',{display:'flex'}],
        ['red',{color:'red'}]
      ]
    })
  ],
})

• 使用图标的话，需要安装
  图标网址：https://icones.js.org

// 后面跟的/ic 根据自己使用的图标集合来决定，按需引入下载
npm i -D @iconify-json/ic

// 使用
// bg-gray-100 对应presetUno预设
// m="10" 对应presetAttributify预设
// class="i-ic-baseline-alarm-on" 对应presetIcons预设
<template>
  <div class="cike bg-gray-100" m="10">
    unocss
  </div>
  <div class="i-ic-baseline-alarm-on">

  </div>
</template>