vue3 を使用してマテリアルライブラリを構築する方法

なぜマテリアルライブラリが必要なのでしょうか?

私たちはたくさんのランディングページを書きました。一部の背景画像と色を除いて、各ログインページの主なレイアウトはほぼ同じで、種類はわずかです。ログインページのコード管理を支援できる場所があれば、次回ログインを記述するときに、インターフェイスを直接生成し、ロジックを調整できます。

ログインページを保存するために login.txt を作成することもできますが、保存するコードスニペットの数が増えると、ファイル名に基づいてコードスニペットの具体的な表示形式を把握することが難しくなります。ここで、マテリアルライブラリを構築して再利用可能なコードスニペットを管理する方法について説明します。

材質は何ですか？

マテリアルは再利用可能なコードスニペットです

再利用といえば、なぜそれをコンポーネントと呼ばないのかと疑問に思うかもしれません。マテリアルはコンポーネントとは根本的に異なるためです。マテリアルは単なるコードの文字列であり、props、event、slot などのプロパティはありません。

材料は粒子のサイズに応じてさまざまなタイプに分類できます。

コンポーネントレベルの材料
ブロックレベルのマテリアル
ページレベルの資料

素材の種類

ボタンを例に挙げてみましょう。たとえば、UI ライブラリのボタンの半径は 6 ピクセルですが、デザイナーが要求するボタンには半径がありません。次のようなコードスニペットを完成させることができます。

<!-- コンポーネント レベルのマテリアル -->
<el-button style="border-radius:0"></el-button>

このコードスニペットをコンポーネントレベルのマテリアルとして保存すると、角が丸くないボタンを使用するときにこのコードスニペットをすばやく取得できるようになります。

属性を追加するだけではないのか？なぜマテリアルにする必要があるのか？と疑問に思うかもしれません。直接記述すればいいのです。この例では、コンポーネントレベルのマテリアルが何であるかを最も簡単な方法で説明したいと思います。フィレットを変更するだけの場合は、マテリアルとして保存する必要はありません。

通常、バックエンド管理システムを開発する場合、ほとんどのリストとテーブルはページングされて表示されます。テーブルとページ区切りを組み合わせたコードスニペットをブロックレベルマテリアルと呼びます。次に例を示します。

<!-- ブロック レベルのマテリアル -->
<el-テーブル />
<el-ページネーション />

同様に、ログインページと登録ページが異なるプロジェクトで同じスタイルになっている場合は、ページ全体をページレベルのマテリアルとして使用することもできます。次に例を示します。

<!-- ページレベルの資料 -->
<el-input placeholder="ユーザー名を入力してください"></el-input>
<el-input placeholder="パスワードを入力してください"></el-input>
<el-button>ログイン</el-button>
<a href="#" rel="external nofollow" >パスワードを忘れましたか?</a>

fuep、vue3 ベースのマテリアルライブラリ

fuep はコードスニペットの管理に役立つツールです。この記事の最後にオンライントライアルリンクがあります。

Feibing を使用したことがある場合、マテリアルの概念は Feibing とほぼ同じであることがわかります。 Feibing との違いは、fuep のマテリアルキャリアがファイルではなく、視覚的なレイアウトツールであることです。ビジュアルレイアウトツールをマテリアルのキャリアとして使用することには、侵入性、Vue および特定の UI ライブラリへのバインドなど、いくつかの欠点があります。現在、element plus と vant3 に基づくマテリアルライブラリのみを作成できます。ただし、Element Plus または Vant ユーザーの場合は、ビジュアルレイアウトを使用してマテリアルを作成すると、次のような多くのメリットが得られます。

素材の表示効果が期待どおりであることを確認するためのリアルタイムプレビュー
レイアウトや詳細は簡単に変更できます
素材は自由に組み合わせ可能
クイックレイアウト

以下に、マテリアルの 1 つを示します。次のコンポーネントを視覚的なレイアウトに次のように配置します。

生成されたコードは次のようになります。

    <el-row type="flex" justify="start" align="middle">
        <el-col :span="12">
            エンジニアの生産性を向上
            Fuep は、視覚的なレイアウトを使用して保守性の高いコードを迅速に生成し、エンジニアの効率を向上させることに重点を置いています。従来の視覚化ツールと比較して、行と列を互いにネストする必要がありません。
            <el-row type="flex" justify="start" align="middle">
                <el-button type="primary" class="ml-4 mt-4 px-8">ライブデモ</el-button>
                <el-button class="ml-4 mt-4 px-8">開始する</el-button>
            </el-row>
        </el-col>
        <el-col :span="12">
            <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="カバー" class="" fit="スケールダウン"></el-image>
        </el-col>
    </el-row>

コードによってレンダリングされるインターフェースは次のとおりです。