unocss haowuyongchu

### 如何使用 UnoCSS

#### 安装 UnoCSS

为了开始使用 UnoCSS，首先需要将其安装到项目中。对于基于 Vite 的项目来说，可以通过 npm 或 yarn 来完成这一操作[^3]。

npm install @unocss/core @unocss/preset-mini @unocss/cli --save-dev

或者使用 Yarn：

yarn add @unocss/core @unocss/preset-mini @unocss/cli --dev

#### 配置 UnoCSS

接着，在项目的根目录下创建 `uno.config.ts` 文件来定义配置选项。这里展示了一个简单的配置文件例子，它引入了默认的 mini 预设，该预设有助于快速启动并运行[^1]。

import { defineConfig } from '@unocss/core'
import presetMini from '@unocss/preset-mini'

export default defineConfig({
  presets: [
    presetMini(),
  ],
})

#### 在构建工具中集成 UnoCSS

如果是在 Vite 环境下工作，则可以在 vite.config.js 中加入如下插件设置以启用 UnoCSS 支持。

import { defineConfig } from 'vite'
import UnoCSS from '@unocss/vite'

export default defineConfig({
  plugins: [UnoCSS()],
})

#### 使用 UnoCSS 进行样式编写

一旦完成了上述步骤，就可以利用 UnoCSS 提供的强大原子类库来进行 CSS 编写。下面给出了一段 HTML 片段作为示范，展示了如何应用这些原子类实现布局效果。

<div class="p-500 text-white rounded-lg shadow-md">
  Hello, UnoCSS!
</div>

#### 小程序中的 UnoCSS 应用

针对微信小程序开发者而言，有专门的小程序预设可供选用——即 unocss-preset-weapp。此预设允许在 Taro、UniApp 和原生小程序环境中轻松集成 UnoCSS 功能[^2]。

npm i unocss-preset-weapp -D

随后按照官方指引调整相应配置即可让 UnoCSS 正常运作于小程序平台之上。