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'

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

ガイド:

• 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