来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

CSS原子化

Anthony Fu - 重新构想原子化CSS

原子化CSS是一种CSS的架构方式，它倾向于小巧且用途单一的class，并且会以视觉效果进行命名，例如：

1
2
3
4
5
6
7
.m-0 {
  margin: 0;
}
.text-red {
  color: red;
}
/* ... */

优点：

  1. 减少CSS体积、提高CSA复用
  2. 减少起名复杂度

缺点：增加记忆成本，因为将CSS拆分成原子后，必须记住一些class才能书写

项目接入unocss

引入依赖：

1
npm i -D unocss

配置（vite.config.ts）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import unocss from 'unocss/vite'

export default defineConfig({
// 省略...

plugins: [unocss({
  rules:[
    // 静态类名
    ["flex",{display:"flex"}],
    ["red",{color:"red"}],
    // 动态类名
    [/^m-(\d+)$/, ([,d])=>({margin:`${Number(d)*10}px`})]
    // 省略......
  ],
  shortcuts: {
    // 组合类名
    karate: ["flex","red"]
  }})],
}

引入（main.ts）：

1
import "uno.css"

使用unocss

常规使用

vite.config.ts：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
unocss({
  rules:[
    // 静态类名
    ["flex",{display:"flex"}],
    ["red",{color:"red"}],
    // 动态类名
    [/^m-(\d+)$/, ([,d])=>({margin:`${Number(d)*10}px`})]
    // 省略......
  ],
  shortcuts: {
    // 组合类名
    karate: ["flex","red"]
  }
})

App.vue：

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div>
    <!-- 使用静态类名 -->
    <!-- <div class="flex red"> -->
    <!-- 使用组合类名 -->
    <div class="karate">
      <div class="m-2">yjsp&nbsp;</div>
      <div class="m-4">mur&nbsp;</div>
      <div class="m-6">kmr&nbsp;</div>
    </div>
  </div>
</template>

样式便成功地被应用了。

使用预设

  • presetIcons：根据类名使用图标库Icônes
  • presetAttributify：美化属性
  • presetUno：预设类名

vite.config.ts：

1
2
3
4
5
6
7
8
import { presetIcons, presetAttributify, presetUno } from 'unocss'

export default defineConfig({
  // 其他省略......
  plugins: [unoCss({
    presets: [presetIcons(),presetAttributify(),presetUno()]
  })]
})

App.vue：

1
2
3
4
5
6
7
8
9
10
<template>
  <div>
    <!-- 使用presetIcons -->
    <div class="i-ic-baseline-access-alarm"></div>
    <!-- 使用presetAttributify -->
    <div flex red m="1">yajue</div>
    <!-- 使用presetUno -->
    <div class="bg-red-300">草</div>
  </div>
</template>

预设的样式生效了。