vue3配置unocss

### 如何在 Vue 3 中配置 UnoCSS

#### 安装依赖包
为了能够在 Vue 3 项目中使用 UnoCSS，需要先通过 npm 或 yarn 来安装必要的依赖项。这通常涉及到 `unocss` 和其对应的 Vite 插件 `@unocss/vite`。

npm install unocss @unocss/vite -D

或者如果偏好使用 Yarn：

yarn add unocss @unocss/vite --dev

#### 配置 Vite
接着，在项目的根目录下找到或创建 `vite.config.ts` 文件，并导入并注册 UnoCSS 插件到 Vite 构建过程中[^2]。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'

export default defineConfig({
  plugins: [
    vue(),
    Unocss(), // 注册 UnoCSS 插件
  ],
})

#### 使用 VSCode 扩展 (可选)
对于希望提高开发效率的开发者来说，可以在 Visual Studio Code 应用商店里查找名为 "UnoCSS" 的扩展程序来辅助编写 UnoCSS 类名。该插件能够提供智能提示等功能，有助于减少记忆负担和提升编码速度。

#### 编写组件样式
一旦完成了上述设置步骤后，就可以直接在 HTML 标签内或是 `<template>` 标记中的元素上应用 UnoCSS 提供的各种实用类名称了。由于 UnoCSS 支持按需加载机制，因此无需担心未被使用的 CSS 规则会增加打包体积[^4]。

例如：

<template>
  <div class="p-4 m-auto bg-blue-500 text-white rounded-lg shadow-md">
    Hello, UnoCSS with Vue 3!
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>