element-plus-vue3

このスキルを使用する場面

ユーザーが次のことを求めている場合は、いつでもこのスキルを使用してください。

• Vue 3 プロジェクトに Element Plus をインストールしてセットアップする
• Vue 3 アプリケーションで Element Plus コンポーネントを使用する
• Element Plus を設定する（グローバル設定、i18n、テーマなど）
• フォームコンポーネント（Button、Input、Form など）を使用する
• データ表示コンポーネント（Table、Card など）を使用する
• フィードバックコンポーネント（Message、Notification、Dialog など）を使用する
• ナビゲーションコンポーネント（Menu、Tabs など）を使用する
• コンポーネントのスタイルやテーマをカスタマイズする
• コンポーネントのイベントを処理する
• Element Plus の API やメソッドを理解する
• Element Plus の問題をトラブルシューティングする

このスキルの使い方

このスキルは、Element Plus の公式ドキュメントの構成（https://element-plus.org/zh-CN/, https://element-plus.org/en-US/guide/design, https://element-plus.org/en-US/component/overview）に合わせて整理されています。Element Plus を使用する際は、次の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します：

   • Installation/安装 → examples/guide/installation.md
   • Quick Start/快速开始 → examples/guide/quick-start.md
   • Design/设计 → examples/guide/design.md
   • Components/组件 → examples/components/
   • API/API 文档 → api/

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます：

   ガイド（使用指南）：

   • examples/guide/installation.md - インストールガイド
   • examples/guide/quick-start.md - クイックスタートガイド
   • examples/guide/design.md - デザインガイドライン
   • examples/guide/i18n.md - 国際化
   • examples/guide/theme.md - テーマのカスタマイズ
   • examples/guide/global-config.md - グローバル設定

   コンポーネント（组件）：

   • examples/components/overview.md - コンポーネントの概要
   • examples/components/button.md - ボタンコンポーネント
   • examples/components/input.md - 入力コンポーネント
   • examples/components/form.md - フォームコンポーネント
   • examples/components/table.md - テーブルコンポーネント
   • examples/components/card.md - カードコンポーネント
   • examples/components/dialog.md - ダイアログコンポーネント
   • examples/components/message.md - メッセージコンポーネント
   • examples/components/notification.md - 通知コンポーネント
   • examples/components/menu.md - メニューコンポーネント
   • examples/components/tabs.md - タブコンポーネント
   • examples/components/date-picker.md - DatePicker コンポーネント
   • examples/components/select.md - Select コンポーネント
   • examples/components/switch.md - Switch コンポーネント
   • examples/components/checkbox.md - Checkbox コンポーネント
   • examples/components/radio.md - Radio コンポーネント
   • examples/components/upload.md - Upload コンポーネント
   • examples/components/pagination.md - Pagination コンポーネント
   • examples/components/tree.md - Tree コンポーネント
   • examples/components/tree-select.md - TreeSelect コンポーネント
   • examples/components/transfer.md - Transfer コンポーネント
   • examples/components/descriptions.md - Descriptions コンポーネント
   • examples/components/avatar.md - Avatar コンポーネント
   • examples/components/badge.md - Badge コンポーネント
   • examples/components/tag.md - Tag コンポーネント
   • examples/components/empty.md - Empty コンポーネント
   • examples/components/loading.md - Loading コンポーネント
   • examples/components/popover.md - Popover コンポーネント
   • examples/components/tooltip.md - Tooltip コンポーネント
   • examples/components/dropdown.md - Dropdown コンポーネント
   • examples/components/drawer.md - Drawer コンポーネント
   • examples/components/popconfirm.md - Popconfirm コンポーネント

3. そのサンプルファイルに記載された、構文、構成、ベストプラクティスに関する具体的な指示に従います。

   重要な注意事項：

   • Element Plus は Vue 3 専用です
   • コンポーネントは Vue 3 Composition API を使用します
   • サンプルには Options API と Composition API の両方が含まれています
   • 各サンプルファイルには、主要な概念、コード例、要点が記載されています

4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照します：

   • api/component-api.md - コンポーネント API リファレンス
   • api/props-and-events.md - Props とイベントのリファレンス
   • api/global-config.md - グローバル設定 API

5. templates/ ディレクトリのテンプレートを使用します：

   • templates/installation.md - インストール用テンプレート
   • templates/component-usage.md - コンポーネント使用用テンプレート
   • templates/project-setup.md - プロジェクト設定用テンプレート

1. Element Plus を理解する

Element Plus は、Element Design の原則に従った豊富な UI コンポーネントを提供する Vue 3 コンポーネントライブラリです。

主な概念:

• Vue 3 のサポート: Composition API を使用して Vue 3 向けに構築されています
• デザインシステム: Element Design のデザイン言語に従っています
• 豊富なコンポーネント: さまざまなユースケースに対応する 60 以上のコンポーネント
• テーマのカスタマイズ: テーマのカスタマイズに対応しています
• i18n: 国際化に対応しています
• TypeScript: TypeScript を全面的にサポートしています

2. インストール

npm を使用する場合:

npm install element-plus

yarn を使用する場合:

yarn add element-plus

pnpm を使用する場合:

pnpm add element-plus

3. 基本設定

すべてのコンポーネントをインポートする場合:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

必要なコンポーネントのみをインポートする場合:

import { ElButton, ElInput } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import 'element-plus/es/components/input/style/css'

ドキュメントの対応関係（公式ドキュメントとの一対一対応）

ガイド（指南）:

• examples/guide/ または examples/getting-started/ のガイドファイルを参照してください → https://element-plus.org/en-US/guide/design

コンポーネント（组件）:

• examples/components/ のコンポーネントファイルを参照してください → https://element-plus.org/en-US/component/overview

サンプルとテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細なサンプルが含まれています。すべてのサンプルは examples/ ディレクトリにあります（上記の対応関係を参照してください）。

サンプルを使用するには:

• ユーザーのリクエストからトピックを特定します
• 上記の対応関係から適切なサンプルファイルを読み込みます
• そのファイルに記載された手順、構文、ベストプラクティスに従います
• コードサンプルを具体的なユースケースに合わせて調整します

テンプレートを使用するには:

• よく使用するスキャフォールディングについては、templates/ ディレクトリのテンプレートを参照します
• テンプレートを具体的なニーズやコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリにあり、公式 Element Plus API ドキュメントの構成に合わせて整理されています。

コンポーネント API（api/component-api.md）

• コンポーネントの props とイベント
• コンポーネントのメソッド
• コンポーネントのスロット

Props とイベント（api/props-and-events.md）

• 共通の props
• 共通のイベント
• イベント処理

グローバル設定（api/global-config.md）

• グローバル設定オプション
• ConfigProvider の使用方法
• テーマ設定

API リファレンスを使用するには:

1. 確認したい API を特定します
2. api/ ディレクトリから対応する API ファイルを読み込みます
3. API のシグネチャ、パラメーター、戻り値の型、サンプルを確認します
4. 詳細な使用パターンについては、リンク先のサンプルファイルを参照します
5. すべての API ファイルには、examples/ ディレクトリ内の関連するサンプルファイルへのリンクがあります

ベストプラクティス

1. 必要なコンポーネントのみをインポートする: バンドルサイズを削減するため、必要なコンポーネントのみをインポートします
2. Composition API を使用する: コードをより整理しやすくするため、Composition API を優先します
3. イベントを適切に処理する: コンポーネントの操作には適切なイベントハンドラーを使用します
4. テーマをカスタマイズする: カスタマイズにはテーマ変数を使用します
5. デザイン仕様に従う: Element Design の仕様に従います
6. TypeScript を使用する: 型安全性を高めるために TypeScript を活用します

リソース

• 公式ドキュメント: https://element-plus.org/zh-CN/
• 英語版ドキュメント: https://element-plus.org/en-US/
• デザインガイド: https://element-plus.org/en-US/guide/design
• コンポーネント一覧: https://element-plus.org/en-US/component/overview
• GitHub リポジトリ: https://github.com/element-plus/element-plus

キーワード

Element Plus, element-plus, Vue 3, Vue3, UI コンポーネント, コンポーネントライブラリ, コンポーネントライブラリ, ボタン, フォーム, テーブル, ダイアログ, メッセージ, 通知, メニュー, タブ, 日付選択, セレクト, スイッチ, チェックボックス, ラジオボタン, アップロード, ページネーション, ツリー, 転送, 説明リスト, アバター, バッジ, タグ, 空の状態, ローディング, ポップオーバー, ツールチップ, ドロップダウン, ドロワー, 確認ポップオーバー, Button, Form, Table, Dialog, Message, Notification, Menu, Tabs, DatePicker, Select, Switch, Checkbox, Radio, Upload, Pagination, Tree, Transfer, Descriptions, Avatar, Badge, Tag, Empty, Loading, Popover, Tooltip, Dropdown, Drawer, Popconfirm