Element Plusコンポーネントをラップし、UnoCSSで美化する

前言#

日常の開発において、重複して車輪を再発明することを避け、開発時間を無駄にしないために、私たちはよくelement plusやvant-uiなどの有名なコンポーネントライブラリを使用します。しかし、プロジェクト全体の美観を考慮して、第三者のコンポーネントライブラリをそのまま使用することは少なく、プロジェクトの全体的な UI スタイルにより適合させるために修正を行います。このとき、第三者のコンポーネントライブラリを抽出し、公共コンポーネントライブラリとして封装することができます。このような第三者のコンポーネントライブラリを封装する操作は二次封装と呼ばれます。

二次封装の利点#

コードの簡潔さをより遵守✌️
プロジェクトの後期メンテナンスが容易🤪
コンポーネントの再利用性が高い🪄

Unocss 紹介#

既に第三者のコンポーネントライブラリを封装するので、スタイルを修正せざるを得ません。CSS の修正はしばしば最も頭を悩ませる作業です（少なくとも私にとってはそうです🥹）。このとき、antfu先生の再考原子化 CSSを見つけました。この文章を先に読むことを強くお勧めします。原子化CSSについてより深く理解できるでしょう。ここでは大神の言葉を要約します：

原子化 CSS は、CSS のアーキテクチャ方式であり、小さくて用途が単一のクラスを好み、視覚的な効果に基づいて命名されます。

Unocss は、antfu 先生が作成した高性能で非常に柔軟な即時原子化CSSエンジンです。なぜ CSS フレームワークではなくエンジンなのかというと、Unocss はコアツールクラスを提供していないからです。すべての機能はプリセットとインライン設定を通じて提供されます。

Unocss の利点#

柔軟性（属性化モード、数万の純CSSアイコン、スタイルの衝突を心配する必要なし）🪄
スタイルの再利用性が高い🐼
クラス名を考える必要がない！（これは名前を付けるのが難しい人にとって非常に助かります）🤣

二次封装とUnocssが開発効率を大幅に向上させ、皆の気分を良くするので、次にこれら二つを組み合わせた様子を試してみましょう。ここではelement plusのloadingコンポーネントを簡単に二次封装し、Unocssを使って美化します。

二次封装の核心#

ここではvue3のコンポーネント封装方法を使用します。vue2の封装方法とは少し異なります。vue2の封装方法については紅尘先生の文章をご覧ください。

$attrs#

コンポーネントのすべての透過属性を含むオブジェクトです。

これは vue 公式の$attrsの定義で、親コンポーネントから渡され、子コンポーネントで props やカスタムイベントとして宣言されていない属性やイベント処理関数を指します。例えば、コンポーネント内で<div>タグに<button>をネストした場合、classやv-onのリスナーのような透過属性を内部の<button>に直接適用したいときは、v-bind="$attrs"を使用して実現できます。

v-on リスナーの継承#

vue3では、2 の$listenersイベントリスナーが直接削除され、その機能が$attrsに統合されました。例えば、クリックイベントを作成する場合、コンポーネントの封装内で、原子コンポーネントのクリックは、親コンポーネントの onclick イベントを引き続きトリガーします。

  <!-- 子コンポーネント -->
<button>クリックしてね</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"
  >
    クリックしてね
  </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 */ }),
  ],
}

そしてmain.jsにUnoCSSをインポートします：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 クラスを書いた後、直接属性モードでグループ化され、コードがより整理され、可読性が大幅に向上します：

<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>

コンポーネントのスタイルを修正#

ボタンにクリックしたいという欲望を与えるために、click meにジャンプするアニメーションを追加してみましょう。このとき、UnoCSSのplaygroundを開くと、公式のデモに繰り返しジャンプするスタイルがあり、直接コピーして子コンポーネントを修正します：

<div  class="
      text-5xl
      fw300
      animate-bounce-alt
      animate-count-infinite
      animate-duration-1s"
    >
      クリックしてね
</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 の一度の試みです：
https://github.com/isolcat/CatIsol-UI

コンポーネントライブラリのプレビューアドレス：https://cat-isol-ui.vercel.app😽