关于原子CSS引擎 -- unocss

前言

unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。
之前有分享提到过Tailwind，不知道大家是否还记得，Tailwind就是一种原子化的CSS框架。

原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能。更加通俗的来讲，原子化CSS是一种新的CSS编程思路，它倾向于创建小巧且单一用途的class，并且以视觉效果进行命名。

优点

它可以让你快速地开发和原型设计，而不需要考虑CSS的细节。
它可以让你的CSS文件更小，因为它只生成你用到的工具类。
它可以让你的CSS更一致，因为它遵循一套预设的规则和变量。
它可以让你的CSS更灵活，因为它支持自定义工具类，变体，指令和图标。
它可以让你的CSS更易于维护，因为它避免了样式冲突和重复代码。

unocss的安装和使用

unocss官网：https://unocss.dev/

unocss的安装(支持pnpm/yarn/npm)：

pnpm add -D unocss

在Vite中使用unocss
unocss支持多种打包工具，这里仅以vite进行介绍，其他的方式可以查看官方文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 在vite配置文件中引入unocss
// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

// 新建 uno.config.ts 文件
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

// 全局引入
import 'virtual:uno.css'

在Vite中使用unocss时，支持设置不同的mode：

• global(默认)
  在这种模式下，需要在项目入口文件中添加 uno.css 的引入，同时这种模式支持热更新，生成的css样式会注入到index.html文件中。
• vue-scoped
  将生成的css注入