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 */ }),
  ],
}

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

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