unocss是一个即时的原子CSS引擎,它可以让你用简短的类名来控制元素的样式,而不需要写复杂的CSS代码。
当然,原子样式也有很多选择,最著名的就是 Tailwind。但由于Tailwind 会生成大量样式定义,会导致全量的 CSS 文件往往体积会多至数 MB,从而有性能上有一些不足
npm i unocss -S
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>