UnoCSS实战 ｜ 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 10 天

前言

原子化css体验

重新构想原子化 CSS (antfu.me)

本篇介绍一下如何配置UnoCSS、UnoCSS怎么使用

安装

先创建一个vite模板 cn.vitejs.dev/guide/#scaf…

这里使用pnpm

lua
 代码解读
复制代码
pnpm create vite

选择vue、typescript

bash
 代码解读
复制代码
cd vite-project
pnpm install
pnpm run dev

运行一下

初始化成功了，接下来安装unocss github.com/unocss/unoc…

使用文档给的vite安装方式

css
 代码解读
复制代码
pnpm i -D unocss

在vite config里写上

ts
 代码解读
复制代码
// vite.config.ts
import UnoCSS from ''unocss/vite''
​
export default {
  plugins: [
    UnoCSS({ /* options */ }),
  ],
}

配置完全的vite config是这样的

ts
 代码解读
复制代码
// vite.config.ts
import { defineConfig } from ''vite''
import vue from ''@vitejs/plugin-vue''
import UnoCSS from ''unocss/vite''
import { presetUno } from ''unocss''
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    UnoCSS({
      presets: [
        presetUno(),
      ],
    }),
  ],
})

然后在main.ts里加入

ts
 代码解读
复制代码
// main.ts
import ''uno.css''

这里没有eslint还是很不舒服的，推荐一个antfu的eslint配置，来安装一下eslint

github.com/antfu/eslin…

bash
 代码解读
复制代码
pnpm add -D eslint @antfu/eslint-config

创建.eslintrc写入

perl
 代码解读
复制代码
{
  "extends": "@antfu"
}

在package json里加入

json
 代码解读
复制代码
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

如果你使用的是VSCode 下载 VS Code ESLint extension 然后编辑 .vscode/settings.json

json
 代码解读
复制代码
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

之后重启vscode

安装完成😎

使用

我们来写一个小demo

就把原本的默认界面改成unocss好了

先看app.vue

html
 代码解读
复制代码
<script setup lang="ts">
import HelloWorld from ''./components/HelloWorld.vue''
</script>
​
<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo">
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
​
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
​

改成原子化css的形式

这里最好先配置一下vite config 多加一点预设

ts
 代码解读
复制代码
// vite.config.ts
import { defineConfig } from ''vite''
import vue from ''@vitejs/plugin-vue''
import UnoCSS from ''unocss/vite''
import { presetAttributify, presetIcons, presetTypography, presetUno, presetWebFonts, transformerDirectives, transformerVariantGroup } from ''unocss''
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    UnoCSS(
      {
        presets: [
          presetUno(),
          presetAttributify(),
          presetIcons({
            scale: 1.2,
          }),
          presetTypography(),
          presetWebFonts({
            fonts: {
              sans: ''DM Sans'',
              serif: ''DM Serif Display'',
              mono: ''DM Mono'',
            },
          }),
        ],
        transformers: [
          transformerDirectives(),
          transformerVariantGroup(),
        ],
      },
    ),
  ],
})
​

我们先用@apply将css改一下 <style scoped>

css
 代码解读
复制代码
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

这里不会的语法可以看tailwindcss文档

改成

css
 代码解读
复制代码
.logo {
  @apply h-6em p-1.5em
}
.logo {
  @apply hover:drop-shadow-[0_0_2em_#646cffaa]
}
.logo.vue {
  @apply hover:drop-shadow-[0_0_2em_#42b883aa]
}

怎么样？是不是感觉很清晰明了

这是在tailwindcss里很受欢迎的@apply命令 通过预设导入了unocss

但是这样体现不出原子化css的方便，虽然非常好看

我们把css写入html

html
 代码解读
复制代码
<script setup lang="ts">
import HelloWorld from ''./components/HelloWorld.vue''
</script>
​
<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="h-6em p-1.5em hover:drop-shadow-[0_0_2em_#646cffaa]" alt="Vite logo">
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="hover:drop-shadow-[0_0_2em_#42b883aa]" alt="Vue logo">
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
​
<style scoped>
</style>

这样写就很方便了

再看HelloWorld.vue

html
 代码解读
复制代码
<script setup lang="ts">
import { ref } from ''vue''
​
defineProps<{ msg: string }>()
​
const count = ref(0)
</script>
​
<template>
  <h1>{{ msg }}</h1>
​
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>
​
  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
​
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
​

这个改的比较少

html
 代码解读
复制代码
<script setup lang="ts">
import { ref } from ''vue''
​
defineProps<{ msg: string }>()
​
const count = ref(0)
</script>
​
<template>
  <h1>{{ msg }}</h1>
​
  <div class="card">
    <button type="button" @click="count++">
      count is {{ count }}
    </button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>
​
  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="text-[#888]">
    Click on the Vite and Vue logos to learn more
  </p>
</template>
​
<style>
</style>
​

改成这样就行

再看style.css文件 内容比较多

css
 代码解读
复制代码
:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
​
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
​
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
​
a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}
​
body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}
​
h1 {
  font-size: 3.2em;
  line-height: 1.1;
}
​
button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}
​
.card {
  padding: 2em;
}
​
#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}
​
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}
​

一点点儿改

最后改成了这样 还挺还原的是不是

有一些媒体查询不会改

根元素没改

代码如下

css
 代码解读
复制代码
// style.css
:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
​
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
​
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
​
​
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}
​

html
 代码解读
复制代码
// HelloWorld.vue
<script setup lang="ts">
import { ref } from ''vue''
​
defineProps<{ msg: string }>()
​
const count = ref(0)
</script>
​
<template>
  <h1 class="text-3.2em leading-tight">
    {{ msg }}
  </h1>
​
  <div class="p-2em flex flex-col place-items-center">
    <button
      type="button" class="
      rounded-8px border-1px border-solid border-transparent
      py-0.6em px-1.2em text-1em font-medium
      bg-[#1a1a1a] cursor-pointer transition duration-250
      hover:border-color-[#646cff]
      focus:outline-4 focus:outline-[-webkit-focus-ring-color]
      focus-visible:outline-4 focus-visible:outline-[-webkit-focus-ring-color]
    " @click="count++"
    >
      count is {{ count }}
    </button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>
​
  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank" class="font-medium color-[#646cff] hover:color-[#535bf2]">create-vue</a>, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/johnsoncodehk/volar" target="_blank" class="font-medium color-[#646cff] hover:color-[#535bf2]">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="text-[#888]">
    Click on the Vite and Vue logos to learn more
  </p>
</template>
​
<style>
</style>
​

html
 代码解读
复制代码
// App.vue
<script setup lang="ts">
import HelloWorld from ''./components/HelloWorld.vue''
</script>
​
<template>
  <div class="m-0 flex flex-col place-items-center min-w-320px min-h-100vh">
    <div class="max-w-1280px my-0 mx-auto p-2rem text-center">
      <a href="https://vitejs.dev" target="_blank" class="font-medium color-[#646cff] hover:color-[#535bf2]">
        <img src="/vite.svg" class="h-6em p-1.5em hover:drop-shadow-[0_0_2em_#646cffaa]" alt="Vite logo">
      </a>
      <a href="https://vuejs.org/" target="_blank" class="font-medium color-[#646cff] hover:color-[#535bf2]">
        <img src="./assets/vue.svg" class="h-6em p-1.5em hover:drop-shadow-[0_0_2em_#42b883aa]" alt="Vue logo">
      </a>
    </div>
    <HelloWorld msg="Vite + Vue" />
  </div>
</template>
​
<style>
</style>
​

可以看出来虽然写的简单，但是还是比较乱

这样写的好处是，不用想类名，

如果加了@apply会更美观，但是还是要写类名，和普通css的区别就是简单了一些

同时还有一些自带的样式预设

结尾

本篇我们介绍了UnoCSS的特点，UnoCSS的使用，还是改了挺长时间的，主要是不会写语法，要查tailwind文档 tailwindcss.com/docs

还有一些好几个值的css 不知道什么意思

css
 代码解读
复制代码
outline: green solid 3px;
/* mdn:颜色 | 样式 | 宽度 */

css
 代码解读
复制代码
outline: 4px auto -webkit-focus-ring-color;
/* style.css */

关于这种就不知道怎么写

最后只能掰成

ini
 代码解读
复制代码
focus:outline-4 focus:outline-[-webkit-focus-ring-color]

😋

题外话：

Anthony Fu大佬真的是我目前的偶像，狂热的开源爱好者，人长得又帅，做的东西又好

🤣这是我在掘金搜unocss搜到的一篇文章中的第一句话 文章在这 juejin.cn/post/702884…

antfu大佬确实也是我的偶像

22年秋季 antfu大佬在b站办过几场直播写代码，我基本上是每期必看，这个人非常有意思，有很多新鲜的点子，狠活也多 比如说

github.com/antfu/1990-… 这个仓库教你怎么把GitHub历史穿越回1990年🤭

他的每个star比较多的仓库我都体验过，感觉设计灵感真的让人眼前一亮，启发基于社区，创造更快的轮子，更好玩的轮子

github.com/antfu/retyp… 这个是直播写的雏形 让写的代码在vsc里回放，便于理清思路

github.com/antfu/vue-m… 这个是首次直播写的扫雷，很清晰的vue代码，看他写真的开窍

github.com/antfu/vue-s… 这个也是直播写的雏形，为了使组件有更好的过渡

就说这么多，人也长得帅

🥰😘

参考

developer.mozilla.org/zh-CN/docs/…

tailwindcss.com/docs

www.tailwindcss.cn/docs/functi…

github.com/unocss/unoc…

cn.vitejs.dev/