vue unocss使用

原子化css
react中一般用tailwind 需搭配postcss使用
vue中 用unocss就可以
先安装unocss 在安装nuocss需要的的预设 预设呢就是我们在使用时是这么写的 text-red-500、bg-blue-200，这些类名对应的解析都在预设里，我们也可以自己编写一些预设。
然后创建一个uno.config.js 配置文件 uno的配置只能是js或者ts格式，不支持json，yaml等
配置中引入uno的预设就可以
下一步需要再vite里配置 因为uno需要参与到编译过程，需要在vite的plugins配置
然后再main.js中引入 import “uno.css”; uno编译生成的css会放到uno.css文件里，所以我们需要引入uno.css 页面才会有样式
此时便可以在html的类名中 写 text-red 类似的类名来实现样式

使用原子化css时，我们会担心出现一长串类名的情况，难以维护，看到有用sass结合uno来实现易维护的功能，css也可以，sass可以嵌套类名

先安装@unocss/transformer-directives （UnoCSS 的一个转换器 在 CSS 文件中使用 指令，例如 @apply 这是Tailwind的一个写法，uno也搞了一个 ，这个包的作用就是解析@apply的内容 转换为css）

然后再uno的配置里配置transformers 把这个包配置进去
然后你就可以
.btn {
@apply p-4 bg-blue-500 text-white rounded-lg;
}