是时候用UnoCSS来美化你的组件了-六虎

前言

在日常的开发中，为了防止重复造轮子，糟蹋开发的时刻，咱们常常会运用到第三方组件库，如element plus、vant-ui等知名组件库，而在一些开发中往往为了项目的全体美观性，咱们都不会直接拿着第三方组件库就直接拿来运用，会对其进行修正，使其愈加贴合项目的全体UI风格，这个时分咱们就能够将第三方组件库进行抽离，封装成公共组件库，而这种对第三方组件库进行封装的操作就被称为二次封装。

二次封装的优点

更恪守代码的简介之道✌️
便于项目后期的保护
组件复用性更强

Unocss介绍

已然要对原第三方组件库进行封装，就难免对其款式进行修正，修正css往往是最让人头疼的(最少对我来说是这样的)，这时分我看见了antfu教师的重新构想原子化CSS,强烈建议先将这篇文章阅读后再看下去，会让你对原子化CSS有着更深的知道,这儿用大神的话来概括一下就是:

原子化 CSS 是一种 CSS 的架构办法，它倾向于细巧且用处单一的 class，并且会以视觉效果进行命名。

而Unocss便是antfu教师做出的具有高性能且极具灵活性的即时原子化 CSS 引擎。至于为什么是引擎而不是一个CSS框架，是因为Unocss并没有供给任何的核心工具类，一切功能都能够通过预设和内联装备来供给

Unocss的优势

灵活性(特色化形式、上万个纯CSS图标、无需担心款式抵触)
款式复用性强
不用想类名！(这点对于起名困难的人来说协助太大了)

已然二次封装和Unocss都能够大大提高开发效率，让咱们心境愉悦，那么接下来咱们便试一试让这两件事情合在一起的姿态，这儿便拿element plus的loading加载组件进行简单的二次封装，再用Unocss来进行美化

二次封装的核心

这儿是运用的vue3的组件封装办法，与vue2的封装办法仍是有些许区别的，关于vue2的封装办法请看红尘教师的文章

$attrs

一个包含了组件一切透传 attributes 的对象。

这是vue官方对$attrs下的界说，是指由父组件传入，且没有被子组件声明为 props 或是组件自界说事情的 attributes 和事情处理函数。比如在组件傍边咱们用<div>标签嵌套了一个<button>的时分，想要让class或许v-on的监听器这类的透传attribute能直接应用在内部的<button>上，这时分咱们就能够采用v-bind="$attrs"来完成

v-on监听器承继

vue3傍边直接删除了2里的$listeners事情监听器，现在直接将其功能融合到了$attrs中。例如写一个点击事情，在组件封装中，咱们原子组件的点击，仍会触发父组件的onclick事情

 <!-- 子组件 -->
<button>click me</button>
 <!-- 父组件 -->
<MyButton @click="onClick" />

组件的封装

项目初始化

命令行输入:

pnpm create vite element-plus-unocss --template vue

运用vite+pnpm快速初始化项目

cd element-plus-unocss
pnpm i
pnpm run dev

成功运转后，项目的初始化便完成了

引进组件库

咱们要封装的组件是element plus，故在此引进：

pnpm install element-plus

这儿咱们仍是依照官方引荐的自动导入，这儿就不多赘述了，直接附上了官网的链接，点击进行装备即可，接下来才是重点

二次封装

这儿咱们选择loading加载组件进行演示，在components中增加咱们要封装的子组件loading.vue，直接复制官方的链接比如皆可(能够适当做一点删减)：

<template>
 <el-button
  v-loading.fullscreen.lock="fullscreenLoading"
  type="primary"
  @click="openFullScreen1"
 >
   Click me
 </el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElLoading } from 'element-plus'

const fullscreenLoading = ref(false)
const openFullScreen1 = () => {
 fullscreenLoading.value = true
 setTimeout(() => {
  fullscreenLoading.value = false
  }, 2000)
}
</script>

这时分咱们再创建Myloading.vue组件，再在其中进行引进，并对其代码进行修正:

<template>
 <Loading
  v-bind="$attrs"
  element-loading-text="正在尽力加载~"
  element-loading-background="rgba(122, 122, 122, 0.8)"
 />
</template>

<script setup>
import Loading from "./loading.vue";
</script>
<style>
.el-loading-mask .el-loading-spinner .el-loading-text {
 font-size: 20px;
}
</style>

运转成果如下：

这时分便代表着咱们组件的二次封装成功了

UnoCSS美化组件

这个时分咱们发现，好像这个click me看上去死气沉沉的，完全没有让人点击的愿望，那么有什么办法能够让这个按钮给人一种呼之欲出，让人很想点击呢？这时分咱们就能够请出咱们的重量级人物UnoCSS了

装置并引进UnoCss

pnpm i -D unocss

对vite.config.js进行装备：

import Unocss from 'unocss/vite'

export default {
 plugins: [
  Unocss({ /* options */ }),
  ],
}

并将UnoCSS引进到main.js中：import 'uno.css'

装备预设

装备预设是我以为UnoCSS的一个重要优势，只需要几个简单的预设，就能在几分钟建立出归于自己的自界说框架，，特色化的特色就是antfu教师的Windi CSS的特色之一了，在UnoCSS中也将这一特色给保留了下来。这儿咱们就装置preset-attributify和unocss/preset-uno:

pnpm i -D @unocss/preset-attributify
pnpm i -D @unocss/preset-uno

修正后的vite.config.js：

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Unocss from '@unocss/vite'
import presetUno from '@unocss/preset-uno'
import presetAttributify from '@unocss/preset-attributify'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
    plugins: [vue(), AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
        Unocss({
            presets: [presetUno(), presetAttributify()]
        })
    ]
})

此时咱们便有了一个默认预设+特色形式的自界说框架了，之后写了一长串的css类后，就会直接依照特色形式进行分组，代码愈加整洁，可读性大大加强：

修正组件的款式

咱们为了让按钮看上去更有点击的愿望，咱们能够测验给click me加上一个跳动的动画，这时分咱们翻开UnoCSS的playground，发现官方的演示里边就有着反复跳动的款式，咱们直接cv一下，修正咱们的子组件:

<div  class="
      text-5xl
      fw300
      animate-bounce-alt
      animate-count-infinite
      animate-duration-1s"
    >
      click me
</div>

这时分咱们感觉默认的按钮字体颜色好像有些太深了，这时分咱们再在父组件进行修正:

<Loading
    element-loading-text="正在尽力加载~"
    v-bind="$attrs"
    element-loading-background="rgba(122, 122, 122, 0.8)"
    class="text-lg 
           fw300 
           m2 
           op70"
  />

这儿假如咱们想要知道cv的究竟是什么内容，咱们能够下载一个UnoCSS插件，直接在vscode中搜索即可，装置后再放在上面就会显示出这个类源码，便于后续的开发

好了，让咱们来看看美化后的按钮的模样：

不断的跳动，是不是让人更有想要点击的愿望呢

结语

UnoCSS作为原子化CSS的新秀，让人眼前一亮，它吸取了长辈taiwind CSS的优势，融合了自己的windiCSS的特色，让它出奇的好用，虽然现在的它仍在测试版，但仍是很引荐咱们去测验一下的，肯定会让你有种什么？还能够这样的感觉，还能够用UnoCSS来建立一个归于你自己的组件库，这儿贴一个自己的组件库项目，就是对UnoCSS的一次测验:github.com/isolcat/Cat…,组件库预览地址：https://cat-isol-ui.vercel.app/(顺带一提，这个文档是vitepress建立的，也是antfu教师的著作)

结合本文所说的组件二次封装，相信你们也能够做出一个很有意思的项目的，等待有更多让人眼前一亮的项目出现，能给我这个菜狗开开眼

是时候用UnoCSS来美化你的组件了

前言