vue3+TS项目配置unocss

大虾写代码2025-09-12 15:18

配置unocss

（1）安装依赖

复制代码

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

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

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

ts 复制代码

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

（4）修改vite.config.ts

ts 复制代码

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

（5）组件中使用

规则查阅：文档

tsx 复制代码

<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>