Vue3コンポーネントライブラリを0から構築する(4)：コンポーネントの開発方法

この記事では、コンポーネントライブラリでコンポーネントを開発する方法を紹介します。

コンポーネントをローカルでリアルタイムにデバッグする方法
コンポーネントライブラリでグローバルインポートをサポートする方法
セットアップの構文シュガーでコンポーネントに名前を付ける方法
コンポーネントの開発方法

ディレクトリ構造

ディレクトリの下に新しいパッケージと2 つのパッケージを作成します。ここにコンポーネントpackagesが保存され、utils パッケージにはいくつかのパブリックメソッドなどが保存されます。2 つのファイルの下で@easyest/components @easyest/utilsをそれぞれ実行します。componentsutilscomponentspnpm init,并将它们的包名改为和

{
    
    
  "name": "@easyest/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

すべてのコンポーネントを格納するcomponentsディレクトリの下に新しいディレクトリを作成しますsrc。最終的なディレクトリ構造は、
ここに画像の説明を挿入
もちろんこれが現在の構造にすぎず、スタイルやテストなどのファイルディレクトリもあるため、後で調整します。

テストコンポーネント

ファイルbutton.vueに簡単なボタンを書き込む

<template>
  <button>测试按钮</button>
</template>

次に、それを button/index.ts にエクスポートします。

import Button from "./button.vue";
export {
    
     Button };
export default Button;

後でアイコン、アップロード、選択などの多くのコンポーネントを作成するため、components/src/index.ts セット内のすべてのコンポーネントをエクスポートする必要があります。

export * from "./button";

最後に、components/index.tsすべてのコンポーネントを外部使用のためにエクスポートします。

export * from "./src/index";

次に、前回の記事で構築した play プロジェクトでテストを行いますまず、ローカルの paly プロジェクトにインストールします@easyest/components(コンポーネントライブラリのパッケージ名、以降のリリースでは名前を自分で変更できます)

pnpm add @easyest/components

そしてapp.vue引用しますButton

<template>
  <div>
    <Button />
  </div>
</template>
<script lang="ts" setup>
import {
    
     Button } from "@easyest/components";
</script>

プロジェクトを開始すると Button コンポーネントが表示され、Button コンポーネントを変更するとホットアップデートの効果も得られます。ここに画像の説明を挿入

app.グローバルマウントコンポーネントを使用する

コンポーネントを使用するとき、app.use() を直接使用してコンポーネントライブラリ全体をマウントしたい場合があります。実際、app.use() を使用すると、受信パラメータの install メソッドが呼び出されるので、最初にそれぞれのパラメータを指定します。コンポーネントインストールメソッドを追加し、コンポーネントライブラリ全体をエクスポートします。button/index.ts を次のように変更します。

import _Button from "./button.vue";
import type {
    
     App, Plugin } from "vue";
type SFCWithInstall<T> = T & Plugin;
const withInstall = <T>(comp: T) => {
    
    
  (comp as SFCWithInstall<T>).install = (app: App) => {
    
    
    const name = (comp as any).name;
    //注册组件
    app.component(name, comp as SFCWithInstall<T>);
  };
  return comp as SFCWithInstall<T>;
};
export const Button = withInstall(_Button);
export default Button;

コンポーネント/index.ts は次のように変更されます。

import * as components from "./src/index";
export * from "./src/index";
import {
    
     App } from "vue";

export default {
    
    
  install: (app: App) => {
    
    
    for (let c in components) {
    
    
      app.use(components[c]);
    }
  },
};

この時点で、グローバルにマウントするときにコンポーネント名として使用する適切な名前をbutton.vue付ける必要があります。name:ea-button

<template>
  <button>测试按钮</button>
</template>
<script lang="ts">
  import {
    
     defineComponent } from "vue";
  export default defineComponent({
    
    
    name: "ea-button",
    setup() {
    
    
      return {
    
    };
    },
  });
</script>

このとき、play/main.tsコンポーネントライブラリをグローバルにマウントします。

import {
    
     createApp } from "vue";
import App from "./app.vue";
import easyest from "@easyest/components";
const app = createApp(App);
app.use(easyest);
app.mount("#app");

app.vue でコンポーネントを使用するea-buttonと、コンポーネントライブラリが正常にマウントされたことがわかります。

<template>
  <div>
    <ea-button />
  </div>
</template>
<script lang="ts" setup></script>

ここに画像の説明を挿入
ただし、このグローバルコンポーネントにはプロパティプロンプトがないため、vscode で volar を使用してプロンプト効果をグローバルコンポーネントに追加する必要があります。

最初にインストールする@vue/runtime-core

pnpm add @vue/runtime-core -D -w

src の下に新しいものを作成しますcomponents.d.ts

import * as components from "./index";
declare module "@vue/runtime-core" {
    
    
  export interface GlobalComponents {
    
    
    EaButton: typeof components.Button;
    EaIcon: typeof components.Icon;
  }
}
export {
    
    };

ここに画像の説明を挿入
現時点では、グローバルに導入されたコンポーネントも即効性を発揮します

注: ユーザーがコンポーネントライブラリを使用する場合、プロンプト効果が表示される前に、tsconfig.json: ["easyest/lib/src/components"] でタイプを構成する必要があります。

"compilerOptions": {
    
    
    //...
    "types": ["easyest/lib/src/components"]
  },

セットアップ構文を使用する

Vue コンポーネントを開発するために setup 構文を使用するのが非常に便利であることは誰もが知っていますが、問題があります。それは、setup 構文を使用するときにコンポーネントに名前を付ける方法です。

実際、解決策は 2 つあります。1 つは、次scriptのような別のラベル名を記述することです。input.vue

<template>
  <button>测试按钮</button>
</template>
<script lang="ts">
import {
    
     defineComponent } from "vue";
export default defineComponent({
    
    
  name: "ea-button"
});
</script>
<script lang="ts" setup></script>

この方法は明らかに奇妙です。2
番目の方法は、プラグインを使用してunplugin-vue-define-options解決します。テスト環境では、Play プロジェクトで設定する必要があります。
まず、unplugin-vue-define-optionsこのプラグインも使用されるため、グローバルにインストールします。後でパッケージ化および構成するため。最新バージョンのインストールではエラーが表示されます。フォローアップの作成者がどのように解決するかを確認し、一時的に// @ts-ignore無視してください。

pnpm add unplugin-vue-define-options  -D -w

次にplay/vite.config.tsプラグインをインポートします

import {
    
     defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// @ts-ignore
import DefineOptions from "unplugin-vue-define-options/vite";
export default defineConfig({
    
    
  plugins: [vue(), DefineOptions()],
});

この時点で、defineOptions関数を直接使用してコンポーネント名を定義できます。

<template>
  <button>测试按钮</button>
</template>

<script lang="ts" setup>
defineOptions({
    
     name: "ea-button" });
</script>

コンポーネント開発

さまざまな効果を実現するには、コンポーネントがいくつかのパラメーターを受け入れる必要があることは誰もが知っています。たとえば、Button コンポーネントは、type、size、roundなどの属性を受け取る必要があります。ここでは、type単純な Button コンポーネントを開発するために 1 つの属性だけを受け入れます。
受信したメッセージに応じて、typeButton コンポーネントに異なるクラス名を付けることができます。

// button.vue
<template>
  <button class="ea-button" :class="buttonStyle"><slot /></button>
</template>

<script lang="ts" setup>
import "./style/index.less";
import {
    
     computed } from "vue";
defineOptions({
    
     name: "ea-button" });
type ButtonProps = {
    
    
  type?: string;
};
const buttonProps = defineProps<ButtonProps>();

const buttonStyle = computed(() => {
    
    
  return {
    
     [`ea-button--${
      
      buttonProps.type}`]: buttonProps.type };
});
</script>

ここでスタイルファイルが導入され、ボタンコンポーネントのスタイルを保存する新しいスタイルフォルダーがボタンディレクトリに作成されます。

src/button/style/index.less次のように

.ea-button {
    
    
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.ea-button.ea-button--primary {
    
    
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;

  &:hover {
    
    
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
}

この時点で、app.vue に Button コンポーネントを導入することで、目的の効果を確認できます。

<template>
  <div>
    <Button type="primary">主要按钮</Button>
  </div>
</template>
<script lang="ts" setup>
import {
    
     Button } from "@easyest/components";
</script>

ここに画像の説明を挿入
コンポーネントの開発には多くの内容が含まれる可能性があるため、ここでは詳しく説明しません。ここでは、コンポーネント開発の一般的な考え方を簡単に紹介します。将来的には、いくつかの共通コンポーネントが開発される予定です。「いいね！」を歓迎します。集めて注目してください！