vue3.2+vite+unocss原子化配置

本文主要是介绍vue3.2+vite+unocss原子化配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、安装unocss：npm install unocss

2、vite.config.ts中配置：

3、创建unocss自己的ts文件：uno.config.ts 根路径下创建，

4、在创建好的uno.config.ts文件中编写如下代码：

// uno.config.ts
import {defineConfig,presetAttributify,presetIcons,presetTypography,presetUno,presetWebFonts,transformerDirectives,transformerVariantGroup,
} from "unocss";export default defineConfig({rules:[['m-1',{margin:'5px',color:'#00ff00'}]],shortcuts: [// ...],theme: {colors: {// ...},},presets: [presetUno(),presetAttributify(),presetIcons(),presetTypography(),presetWebFonts({fonts: {// ...},}),],transformers: [transformerDirectives(), transformerVariantGroup()],
});

5、开始使用：使用页面需要在script中导入：import 'uno.css'

这篇关于vue3.2+vite+unocss原子化配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---