在Vant4+Vue3+TypeScript的H5移动前端使用UnoCSS
UnoCSS 是一个 即时原子化 CSS（Atomic CSS / Utility-first CSS）引擎，类似于 Tailwind CSS 或 Windi CSS，但更轻量、灵活、性能高。本篇随笔结合项目代码介绍在Vant4+Vue3+TypeScript的H5移动前端使用UnoCSS。UnoCSS 它的核心理念是：
[*]原子化 CSS：每一个 class 对应一条 CSS 规则，例如 p-4 就表示 padding: 1rem。
[*]按需生成：只有在 HTML / JS / Vue / React / Svelte 中使用到的类，UnoCSS 才会生成对应的 CSS，避免冗余。
[*]零配置可用：开箱即用，同时支持高度自定义。
[*]极速编译：使用静态分析和即时生成技术，CSS 构建速度非常快。
官网介绍： https://unocss.dev
1、UnoCSS 核心概念
原子类（Atomic Class）
每个 class 对应一个 CSS 属性，例如：
对应 CSS：
div { padding: 1rem; color: #f56565; background-color: #f7fafc; }Preset（预设）
预定义的一套 class 规则，例如：
[*]presetWind3 → 类似 Tailwind 风格
[*]presetAttributify → 属性化写法
[*]presetIcons → 图标类自动生成
Shortcuts（快捷类）
将多个 class 合并为一个，例如：
shortcuts: {
btn: 'px-4 py-2 rounded bg-blue-500 text-white'
}变体（Variants）
前缀用于状态或响应式：
[*]hover:bg-blue-500 → 悬停时背景蓝色
[*]md:flex → 中屏及以上显示 flex 布局
[*]dark:text-white → 暗黑模式下字体白色
UnoCSS = 原子化 + 按需生成 + 极速编译 + 高度可定制的 CSS 工具库
2、如何掌握UnoCSS
要熟练使用 UnoCSS，你需要掌握它背后的 原子化 CSS 规则和标识符。其实，UnoCSS 并没有发明新的 CSS 属性，它是把 CSS 属性 + 值 + 状态/变体 封装成原子类（class），所以掌握 UnoCSS 的标识，核心就是理解 CSS 属性、常用缩写和变体。我给你总结一个体系：
核心 CSS 属性标识（必会）
这些几乎是每个 UnoCSS 项目都会用到的：
类名示例对应 CSS说明p-4padding: 1rem内边距pt-2padding-top: 0.5rem上内边距m-3margin: 0.75rem外边距mt-1margin-top: 0.25rem上外边距w-24width: 6rem宽度h-32height: 8rem高度max-w-mdmax-width: 28rem最大宽度min-h-screenmin-height: 100vh最小高度text-smfont-size: 0.875rem字体大小font-boldfont-weight: 700字重text-centertext-align: center文本对齐leading-6line-height: 1.5rem行高tracking-wideletter-spacing: 0.05em字间距text-red-500color: #f56565字体颜色bg-gray-100background-color: #f7fafc背景色borderborder-width: 1px边框border-gray-300border-color: #d2d6dc边框颜色roundedborder-radius: 0.25rem圆角rounded-lgborder-radius: 0.5rem大圆角shadow-mdbox-shadow: 0 4px 6px -1px rgba(...)阴影核心思路：属性缩写 + 数值/颜色/尺寸 + 状态/变体
常用状态 / 伪类变体
UnoCSS 可以直接在 class 前加状态：
前缀说明示例hover:鼠标悬停hover:bg-blue-500focus:获焦focus:ring-2active:激活active:scale-95dark:夜间模式dark:text-whitesm: / md: / lg:响应式断点md:flex可以组合：hover:md:bg-red-500 → 在中屏及以上，鼠标悬停时背景红色
属性缩写规则（UnoCSS vs Tailwind 很类似）
[*]尺寸：w-24, h-32, min-w-full
[*]间距：p-4, px-2, mt-1, my-6
[*]字体：text-sm, font-bold, leading-6
[*]颜色：text-red-500, bg-blue-200, border-gray-300
[*]边框：border, border-t, border-l-2, rounded, rounded-full
[*]阴影/动画：shadow, shadow-lg, animate-bounce
[*]布局：flex, grid, justify-center, items-start, gap-4
[*]定位：absolute, relative, top-4, left-0
高级标识（可选）
[*]图标：i-mdi-home（需要 presetIcons）
[*]属性风格：p="4" text="red-500"（需要 presetAttributify）
[*]自定义规则 / shortcuts：
shortcuts: {
btn: 'px-4 py-2 rounded bg-blue-500 text-white'
}使用：<button class="btn">点击</button>3、在Vite+Vue3+TS+Vant4的H5移动前端使用UnoCSS
在Vite的移动前端项目中使用UnoCSS，和其他的操作一样，先安装在项目依赖库中
pnpm install -D unocss一般我们还会同时使用它的预设图标处理，因此增加多两个类库。
pnpm install -D @unocss/preset-icons @iconify-json在 uno.config.ts 中配置 presetIcons 插件。图标预设: https://unocss.dev/presets/icons
presetIcons({
extraProperties: {'display': 'inline-block',
'vertical-align': 'middle',
// ...
},
})<br>iconify 生态的图标都可以使用，具体可以在这里查找 Iconify（https://icones.js.org/） - 本项目推荐图标库。它是统一的图标框架，超过 150 多个图标集，和 200,000 个开源矢量图标，并且会定期更新图标。您可以在 iconify 或者 icones 中看到所有的图标集。
在VSCode下使用预设的图标集合，如下所示。
在vite.config.ts 配置：
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
<strong>Unocss()</strong>
]
})在 main.ts 中导入使用。
import 'virtual:uno.css'
import '@unocss/reset/tailwind-compat.css'在界面代码中class里面使用即可
Hello UnoCSS在你的 uno.config.ts 或 uno.config.js 中进行配置UnoCSS 即可。
import { defineConfig, presetUno } from 'unocss'
import { presetWind3 } from 'unocss/preset-wind3'
export default defineConfig({
presets: [
presetWind3 (),
// ...其他 preset
],
})一般来说会比这个更多一些内容。
而一般VSCode 安装插件UnoCSS后，
(https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - UnoCSS 提示插件VSCode里面都有智能提示的，方便使用的同时也有助于了解UnoCSS的具体语法细节，如下我的项目所示。
生成的H5端界面效果如下所示
消息详细界面中，也是统一使用了这样的样式处理方式。
<template>
<page-header @click="goback" />
{{ article.title }}
时间:{{ format(article.edittime) }}
类别:{{ article.category }}
<span class="line-height-loose" v-html="article.content" />
<van-space direction="vertical" fill class="m-4 mb-10 mt-4">
<van-button round type="default" block @click="goback">
返回
</van-button>
</van-space>
</template> 下面是一些使用UnoCSS来构建界面显示的效果图，供参考。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]