一文读懂 UnoCSS：手牵手入门教程

背景

公司准备对之前的一个非前后端分离项目进行UI的全面改版，借此机会直接使用vue3对项目进行全面改造。但是页面非常之多，光是写样式想想就头疼。于是就在探寻一些可以简化样式开发的方案。

之前看网上原子化热度挺高，简单了解过tailwindcss和unocss，可能人对新事物有时有本能的排斥。当时第一感觉就是把内联样式简化了写到class中，最终dom中可能充斥着大量class类名。再就是数量繁多的类名，增加了记忆成本，老项目中也没有重构的必要，所以一直没实践。

于是借这次机会想实(zhe)践(teng)一下，去npmjs上搜了下tailwindcss的使用量，周下载量800w+着实吓到我了，看来是时候挑战一下软肋了。

深入了解了一下，发现原子化开发有一个很大的优点，就是大大减少了css的冗余性，完全按需编译，项目越大，这个特性越明显。而且所谓的记忆成本其实并不高，在插件的加持下，其实写一个页面，常用的类名就记住了，而且跟之前用emmet写样式有点异曲同工的感觉。

至于最终为何选用Unocss，就是当时简单过了下文档，unocss作为几款原子框架的超集，且配置比较灵活，加上作者也是vite的开发者之一就用了，其实不管用哪个框架，用熟了都能无缝切换，都是类似的使用方法。

Let's do it

项目环境：vue3 + vite

安装依赖

js 复制代码

// 核心依赖
yarn add unocss

// 修改框架单位转换，因为框架默认会将单位转换成rem，有时用调试工具看的时候感觉不是很方便，所以通过此依赖转换成px
yarn add -D @unocss/preset-rem-to-px

项目配置

修改main.js，引入unocss

js 复制代码

...
import App from "./App.vue";
import router from "./router";
import "virtual:uno.css";
...

在项目根目录创建uno.confin.{js,ts,mjs,mts}配置文件

js 复制代码

import { defineConfig, presetUno, presetAttributify, transformerDirectives } from "unocss";
import presetRemToPx from "@unocss/preset-rem-to-px";
export default defineConfig({
  //自定义规则
  rules: [],
  //预设规则 有前两个预设可以满足95%以上的需求
  presets: [
    //默认预设，包括Tailwind CSS、Windi CSS、Bootstrap、Tachyons，可以使用以上任意规则
    presetUno(),
    //属性化模式 文档参考：https://unocss.nodejs.cn/presets/attributify
    presetAttributify(), 

    // 启用rem转px
    presetRemToPx({
      //默认情况下（1单位 = 0.25rem）html默认字体是16，改为4，每单位就是1px
      baseFontSize: 4 
    })
  ],
  //配置后可以使用 @apply、@screen等指令 参考地址：https://unocss.nodejs.cn/transformers/directives
  transformers: [transformerDirectives()],
  //以下可以按个人需求添加
  shortcuts: {
    "f-c-c": "flex justify-center items-center"
  },
  theme: {},
});

修改vite.config.js

js 复制代码

...
import vue from "@vitejs/plugin-vue";
import UnoCss from "unocss/vite";

export default defineConfig({
  plugins: [vue(), UnoCss()],
});

VScode扩展配置

工欲善其事必先利其器，安装相应扩展可以大大提高开发效率，增加便捷性。

安装`UnoCSS` 扩展

作用：类名提示、鼠标滑入显示编译后样式、底部虚线标识unocss类名

安装完插件后，将vscode配置文件中的以下配置改为true（没有则新增），可解决部分用户装完插件后，不触发类名提示的问题

js 复制代码

"editor.quickSuggestions": {
    "strings": true,
    "other": true
}

安装UnoT 扩展

非常实用的扩展，强烈建议安装

提供了鼠标滑过style内联样式，提示对应 UnoCss 的css代码
开启 uno-magic 提供自动处理空格和括号的能力，而且会将class类名转换成统一风格
提供了快捷键自动将浏览器复制的样式转换成 UnoCss
右键提供了快速打开 UnoCss 的文档和 Unot 在线编辑的转换结果网站
mac下可通过Command + Option + V(win下快捷键：Control + Alt + V)将复制的样式直接转换成unocss,比如蓝湖上复制的样式，可一键复制成unocss格式

常用配置说明

属性化

html 复制代码

想象一下，你有一个使用 Tailwind CSS 工具的按钮。当列表变得更长时，阅读和维护就变得非常困难。
<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"> Button </button>

1、使用属性化，可转换成以下写法，相当于模块化，同类别写到一起，更直观
<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" 
  text="sm white" 
  font="mono light" 
  p="y-2 x-4" 
  border="2 rounded blue-200" 
> 
  Button 
</button>

2、前缀自引用：对于 `flex`、`border` 等具有与前缀相同的工具的工具，提供了特殊的 `~` 值
<button border="~ red"> Button </button>
相当于
<button class="border border-red"> Button </button>

3、如果属性模式的名称与 elements'或组件' 属性发生冲突，你可以添加 `un-` 前缀解决这个问题
<a text="red">text属性会冲突</a>
<!-- 需转换成 -->
<a un-text="red">Text color to red</a>

配置参考：unocss.nodejs.cn/presets/att...

指令转换器

html 复制代码

有时你觉得某个元素上的类名过长，在编辑器中影响阅读体验
<button class="text-center my-0 font-medium;"> Button </button>

可以采用这种方法，将样式提取到style中
<button class="btn-style"> Button </button>
<style>
.btn-style{
  @apply text-center my-0 font-medium;;
}
</style>

配置参考：unocss.nodejs.cn/transformer...

编译类转换器

html 复制代码

通过添加:uno:可以在编译时，将class编译为一个class
<div class=":uno: text-center sm:text-left">
  <div class=":uno: text-sm font-bold hover:text-red"/>
</div>

会转换成如下
<div class="uno-qlmcrp">
  <div class="uno-0qw2gr"/>
</div>

对应样式则会被编译到style中
<style>
.uno-qlmcrp { 
  text-align: center; 
} 
.uno-0qw2gr { 
  font-size: 0.875rem; 
  line-height: 1.25rem; 
  font-weight: 700; 
} 
.uno-0qw2gr:hover { 
  --un-text-opacity: 1; 
  color: rgb(248 113 113 / var(--un-text-opacity)); 
} 
@media (min-width: 640px) { 
  .uno-qlmcrp { text-align: left; } 
}
</style>

配置参考：unocss.nodejs.cn/transformer...

变体组转换器

html 复制代码

感觉有点类似于属性转换器，不过可以在class内部进行分块编写
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>
将转变为：
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>

配置参考：unocss.nodejs.cn/transformer...

shortcuts快捷方式

有时候开发项目时，想把一些常用的样式聚合在一起，就可以配置shortcuts，然后开发时就可以使用了。比如我上面配置文件中的f-c-c就是把flex布局并且水平垂直居中的样式声明到一起，然后就可以class="f-c-c"这样使用了。

再比如一些模块的通用样式，比如按钮的内边距，边框，圆角等都可以配置一个快捷方式。

eslint格式化

可以对unocss类名按照特定顺序进行格式化，统一团队规范

js 复制代码

yarn add -D @unocss/eslint-config

在`.eslintrc`中进行以下配置
{ "extends": ["@unocss"] }

以上配置后已经足够日常开发，想了解更多细节，可以看下官方文档。

文档地址：unocss.nodejs.cn/

文档无限弹窗问题

我访问文档时会一直弹窗提示关闭广告屏蔽插件，即便我关闭插件或者用隐私模式还是提示。又跟我一样问题的同学，可以采用以下方案，或者阅读原版英文文档。

1.浏览器安装油猴插件 2.选择新建脚本，复制以下代码，保存即可

js 复制代码

// ==UserScript==
// @name         禁用nodejs.cn弹窗
// @namespace    http://tampermonkey.net/
// @version      2024-01-02
// @description  try to take over the world!
// @author       You
// @match        *://*.nodejs.cn/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=nodejs.cn
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    window.alert=function(){}
    window.setInterval = function(){}
    window.setTimeout = function(){}
})();

结语

前端的各种技术花活更新太快，与其说学不动了，倒不如说心累。但回过头想想，如果一个行业一直没有新的事物产生，那也意味着步入夕阳了。

就像怀春的少女，怕他不来，又怕他乱来。😂

拥抱变化吧，兄弟们~~

一文读懂 UnoCSS：手牵手入门教程

背景

Let's do it

安装依赖

项目配置

VScode扩展配置

安装UnoCSS 扩展

安装UnoT 扩展

常用配置说明

属性化

指令转换器

编译类转换器

变体组转换器

shortcuts快捷方式

eslint格式化

文档无限弹窗问题

结语

安装`UnoCSS` 扩展