【前端】原子化UnoCSS使用

介绍

有时候我们会遇到样式复用的情况，需要将一些相同的样式提取到一个 class 中。手动将每个原子粒的样式提取出来非常耗时耗力。曾经使用过 Bootstrap，但它会将没有使用到的类样式也打包到生产环境中，影响了性能。我们需要的是只打包使用到的样式，而不包括没有使用到的。

UnoCSS 应运而生，它让我们能够实现“原子化 CSS”的构想。

环境

用vue3的vite打包
先安装

pnpmi unocss-D

main.js引入

import'uno.css'

vite.config.ts配置

importUnoCSSfrom'unocss/vite'plugins:[UnoCSS({}),],

搭配vscode插件
WindiCSS IntelliSense --------自动完成、语法突出显示、代码折叠和构建等高级功能 |

使用

简单vue模板使用，当个辅助确实可以，上面的插件可以有提示，方便

<pclass="w-50 bg-purple-300 h-50 text-lg">测试样式</p>

来一些指令和解释记录

text-44单位=1rem=16px5就是20px w-50宽200px h-50高200px text-center 文本居中 bg-可选背景颜色 rounded-设置border-radius text-[20px]mt-[30px]rounded-full...