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>