vue3项目引入unocss原子化

本文主要是介绍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>