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'