vue3+TS项目配置unocss

配置unocss

（1）安装依赖

npm i unocss @unocss/preset-uno @unocss/preset-attributify -D
npm install @unocss/transformer-directives

（2）根目录新建uno.config.ts文件

import { defineConfig } from "unocss";
import presetAttributify from "unocss/preset-attributify";
import presetWind3 from "unocss/preset-wind3";
import transformDirectives from "@unocss/transformer-directives";export default defineConfig({presets: [presetWind3(), presetAttributify()],transformers: [transformDirectives()]
});

（3）修改main.ts

// main.ts 引入
import "uno.css";

（4）修改vite.config.ts

import { defineConfig } from "vite";
import UnoCss from "unocss/vite";
export default defineConfig({plugins: [UnoCss()]
});

（5）组件中使用

规则查阅：文档

<template><!-- 1. 属性写法 --><div class="content" text-red>1234567890</div>
</template>
<script setup lang="ts">
import { useDemoStore } from "@/store/demo";const store = useDemoStore();
</script>
<style scoped lang="scss">
.content {// 2. 指令写法，内置指令@apply font-bold w-full h-[500px] flex justify-center items-center;
}
</style>