layui-vue3

このスキルを使用するタイミング

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

• Vue 3 プロジェクトに Layui Vue をインストールしてセットアップする
• Layui Vue のコンポーネント（Button、Table、DatePicker など）を使用する
• Layui Vue を設定する（テーマ、i18n など）
• モーダルやダイアログに Layer コンポーネントを使用する
• Layui Vue のコンポーネントを使ってフォームを実装する
• ソートやページネーションを備えたデータテーブルを使用する
• ファイルのアップロードを処理する
• ドロップダウンやツールチップを作成する
• 日付と時刻のピッカーを使用する
• コンポーネントのスタイルをカスタマイズする
• Layui Vue の API とメソッドを理解する
• Layui Vue の問題をトラブルシューティングする

このスキルの使い方

1. トピックを特定する：ユーザーのリクエストからトピックを特定し、以下の対応表で該当するサンプルファイルを探します

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

3. そのサンプルファイルの個別の指示に従う：構文、構成、ベストプラクティスに関する指示に従います

ドキュメント対応表（https://www.layui-vue.com/zh-CN/ と1対1で対応）

ガイド（指南）：

• examples/getting-started.md → https://www.layui-vue.com/zh-CN/index
• examples/introduce.md → https://www.layui-vue.com/zh-CN/guide/introduce

コンポーネント（组件） - examples/components/：

• examples/components/ ディレクトリ内のコンポーネントファイルを参照してください

• 各コンポーネントファイルは https://www.layui-vue.com/zh-CN/components/[component-name] に対応しています

  重要な注意事項：

  • Layui Vue は Vue 3 向けに構築されています
  • コンポーネントは Composition API を使用します
  • TypeScript に対応しています
  • サンプルには JavaScript 版と TypeScript 版の両方が含まれています
  • 各サンプルファイルには、主要な概念、コード例、重要なポイントが含まれています

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

   • api/layer-api.md - Layer API のメソッド
   • api/component-api.md - コンポーネント API のリファレンス

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

   • templates/installation.md - インストール用テンプレート
   • templates/component-usage.md - コンポーネント使用用テンプレート

1. Layui Vue を理解する

Layui Vue は、Layui の設計理念に従った豊富な UI コンポーネントを提供する Vue 3 コンポーネントライブラリです。

主要な概念：

• Vue 3 対応：Vue 3 Composition API を使用して構築されています
• 豊富なコンポーネント：Button、Table、DatePicker、Layer など
• TypeScript：TypeScript を全面的にサポートしています
• テーマのカスタマイズ：テーマのカスタマイズに対応しています
• i18n：国際化に対応しています

2. インストール

npm を使用する場合：

npm install @layui/layui-vue

yarn を使用する場合：

yarn add @layui/layui-vue

pnpm を使用する場合：

pnpm add @layui/layui-vue

3. 基本的なセットアップ

// main.js
import { createApp } from 'vue'
import LayuiVue from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
import App from './App.vue'

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

4. コンポーネントの基本的な使い方

<template>
  <lay-button type="primary">Button</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
</script>

サンプルとテンプレート

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

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

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

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

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

API リファレンス

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

Layer API（api/layer-api.md）

• layer.open() - モーダル／ダイアログを開く
• layer.close() - レイヤーを閉じる
• layer.msg() - メッセージを表示する
• layer.confirm() - 確認ダイアログを表示する
• layer.load() - ローディングを表示する
• layer.drawer() - ドロワーを表示する

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

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

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

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

ベストプラクティス

1. TypeScriptを使用する：TypeScriptのサポートを活用します
2. 必要に応じてインポートする：必要なコンポーネントのみをインポートします
3. コンポーネントAPIに従う：propsとイベントを正しく使用します
4. テーマをカスタマイズする：テーマ変数を使用してカスタマイズします
5. イベントを処理する：コンポーネントのイベントを適切に処理します
6. Layer APIを使用する：モーダルやダイアログにはLayer APIを使用します

リソース

• 公式ドキュメント：https://www.layui-vue.com/zh-CN/index
• はじめに：https://www.layui-vue.com/zh-CN/guide/introduce
• コンポーネント：https://www.layui-vue.com/zh-CN/components
• GitHubリポジトリ：https://github.com/layui-vue/layui-vue

キーワード

Layui Vue, layui-vue, Vue 3, コンポーネントライブラリ, UIコンポーネント, ボタン, テーブル, 日付選択, Layer, ドロップダウン, ツールチップ, フォーム, 入力, セレクト, チェックボックス, ラジオボタン, スイッチ, アップロード, コンポーネントライブラリ, ボタン, 表, 日付選択, レイヤー, ドロップダウンメニュー, ヒント, フォーム, 入力欄, セレクター, チェックボックス, ラジオボタン, スイッチ, アップロード