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😽