在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 属性，例如：

1. [/code]对应 CSS：
2. [code]div { padding: 1rem; color: #f56565; background-color: #f7fafc; }

复制代码

Preset（预设）
预定义的一套 class 规则，例如：

• presetWind3 → 类似 Tailwind 风格
  
• presetAttributify → 属性化写法
  
• presetIcons → 图标类自动生成
  

Shortcuts（快捷类）
将多个 class 合并为一个，例如：

1. shortcuts: {
2.   btn: 'px-4 py-2 rounded bg-blue-500 text-white'
3. }

复制代码

变体（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：
  

1. shortcuts: {
2.   btn: 'px-4 py-2 rounded bg-blue-500 text-white'
3. }

复制代码

1. 使用：<button class="btn">点击</button>

复制代码

3、在Vite+Vue3+TS+Vant4的H5移动前端使用UnoCSS

在Vite的移动前端项目中使用UnoCSS，和其他的操作一样，先安装在项目依赖库中

1. pnpm install -D unocss

复制代码

一般我们还会同时使用它的预设图标处理，因此增加多两个类库。

1. pnpm install -D @unocss/preset-icons @iconify-json

复制代码

在 uno.config.ts 中配置 presetIcons 插件。图标预设: https://unocss.dev/presets/icons

1. presetIcons({
2.   extraProperties: {'display': 'inline-block',
3.     'vertical-align': 'middle',
4.     // ...
5.   },
6. })<br>

复制代码

iconify 生态的图标都可以使用，具体可以在这里查找 Iconify（https://icones.js.org/） - 本项目推荐图标库。它是统一的图标框架，超过 150 多个图标集，和 200,000 个开源矢量图标，并且会定期更新图标。您可以在 iconify 或者 icones 中看到所有的图标集。
在VSCode下使用预设的图标集合，如下所示。

在vite.config.ts 配置：

1. import Unocss from 'unocss/vite'
2. import { defineConfig } from 'vite'
4. export default defineConfig({
5.   plugins: [
6.     <strong>Unocss()</strong>
7.   ]
8. })

复制代码

在 main.ts 中导入使用。

1. import 'virtual:uno.css'
2. import '@unocss/reset/tailwind-compat.css'

复制代码

在界面代码中class里面使用即可

1.   Hello UnoCSS

复制代码

在你的 uno.config.ts 或 uno.config.js 中进行配置UnoCSS 即可。

1. import { defineConfig, presetUno } from 'unocss'
2. import { presetWind3 } from 'unocss/preset-wind3'
4. export default defineConfig({
5.   presets: [
6.     presetWind3 (),
7.     // ...其他 preset
8.   ],
9. })

复制代码

一般来说会比这个更多一些内容。

而一般VSCode 安装插件UnoCSS后，
[UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - UnoCSS 提示插件VSCode里面都有智能提示的，方便使用的同时也有助于了解UnoCSS的具体语法细节，如下我的项目所示。

生成的H5端界面效果如下所示

 
消息详细界面中，也是统一使用了这样的样式处理方式。

1. <template>
2.   
3.     <page-header @click="goback" />
4.    
5.       
6.         {{ article.title }}
7.       
8.       
9.         
10.           时间:{{ format(article.edittime) }}
11.         
12.         
13.           类别:{{ article.category }}
14.         
15.       
16.       
17.         <span class="line-height-loose" v-html="article.content" />
18.       
20.       <van-space direction="vertical" fill class="m-4 mb-10 mt-4">
21.         <van-button round type="default" block @click="goback">
22.           返回
23.         </van-button>
24.       </van-space>
25.    
26.   
27. </template>

复制代码

 下面是一些使用UnoCSS来构建界面显示的效果图，供参考。
 

   

     

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！