vue3项目配置unocss核心三步：安装unocss及预设依赖、在vite.config.ts中添加unocss插件并创建uno.config.ts配置预设与快捷类、在main.ts顶部导入virtual:uno.css虚拟样式文件实现按需生成。

Vue 3 项目初始化时配置 UnoCSS 原子化样式，核心是三步：安装依赖、接入 Vite 插件、引入虚拟样式文件。不需要预生成大量 CSS，也不用写一堆自定义类，所有样式按需生成，写完即生效。

1. 安装 UnoCSS 及常用预设

在已创建好的 Vue 3 + Vite 项目（推荐 npm create vite@latest my-app --template vue-ts）中，执行：

• npm install -D unocss @unocss/preset-uno @unocss/preset-icons @unocss/preset-attributify
• 如果需要响应式或字体控制，可追加 @unocss/preset-web-fonts 或 @unocss/preset-typography
• 图标预设（@unocss/preset-icons）建议一并安装，后续用 i-carbon-logo 这类类名直接渲染图标，无需额外组件

2. 配置 Vite 插件与 uno.config.ts

在 vite.config.ts 的 plugins 数组中加入 UnoCSS：

• 导入插件：import UnoCSS from 'unocss/vite'
• 添加到插件列表：UnoCSS()（可传入配置对象）

项目根目录新建 uno.config.ts，基础内容如下：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
import presetIcons from '@unocss/preset-icons'
import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetUno(),
    presetIcons({ scale: 1.2 }),
    presetAttributify()
  ],
  shortcuts: {
    'btn-primary': 'px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700',
    'flex-center': 'flex items-center justify-center'
  }
})

3. 在 main.ts 中引入虚拟样式

打开 src/main.ts，在最顶部添加一行：

import 'virtual:uno.css'

注意不是 uno.css 文件（它不存在），而是 Vite 插件自动注入的虚拟模块。这一步必不可少，否则样式不会生效。

4. VSCode 智能提示补全（可选但强烈推荐）

安装官方扩展 “UnoCSS”（VS Code Marketplace），再在项目根目录的 .vscode/settings.json 中确保启用：

{
  "unocss.enable": true,
  "editor.quickSuggestions": {
    "strings": true
  }
}

重启窗口或运行 Developer: Reload Window，即可在 class="" 里输入 m-、text- 等前缀时获得实时类名提示和悬停预览。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！