vue3项目 引入unocss原子化

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

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

npm i unocss -S

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

import unoCss from 'unocss/vite'

export default defineConfig({
  plugins: [
    unoCss({
      rules:[
        
        ['flex',{display:'flex'}],
        ['red',{color:'red'}]
      ]
    })
  ],

})

import 'uno.css'

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

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

import { presetIcons, presetUno, presetAttributify } from 'unocss'



export default defineConfig({
  plugins: [
    unoCss({
      presets:[presetIcons(),presetAttributify(),presetUno()],
      rules:[
        
        ['flex',{display:'flex'}],
        ['red',{color:'red'}]
      ]
    })
  ],
})

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

npm i -D @iconify-json/ic





template>
  div class="cike bg-gray-100" m="10">
    unocss
  /div>
  div class="i-ic-baseline-alarm-on">

  /div>
/template>