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- 等前缀时获得实时类名提示和悬停预览。
