uview-vue2

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

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

• uView UI コンポーネントを使用した uni-app アプリケーションの構築
• uView UI コンポーネント（Button、Input、Form、Table、Modal など）の使用
• uView UI ツール（$u.toast、$u.http など）の使用
• uView UI テーマのカスタマイズ
• uView UI と uni-app の統合
• uView UI を使用したレスポンシブレイアウトの作成
• uView UI フォームコンポーネントの使用
• uView UI コンポーネントを使用したデータの表示
• uView UI を使用したナビゲーションの処理
• uView UI ユーティリティとヘルパーの使用

このスキルの使用方法

このスキルは、uView UI の公式ドキュメントの構成（https://www.uviewui.com/guide/demo.html、https://www.uviewui.com/components/intro.html）に沿って整理されています。uView UI を使用する場合：

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

   • はじめに／クイックスタート → examples/getting-started/installation.md または examples/getting-started/basic-usage.md
   • Button／ボタン → examples/components/button.md
   • Input／入力フィールド → examples/components/input.md
   • Form／フォーム → examples/components/form.md
   • Table／テーブル → examples/components/table.md
   • Modal／モーダル → examples/components/modal.md
   • Toast／トースト → examples/tools/toast.md
   • Http／リクエスト → examples/tools/http.md
   • Theme／テーマ → examples/advanced/theme-customization.md

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

   はじめに（クイックスタート）- examples/getting-started/：

   • examples/getting-started/installation.md - uView UI のインストールと基本設定
   • examples/getting-started/basic-usage.md - コンポーネントの基本的な使用方法
   • examples/getting-started/design-principles.md - 設計原則とベストプラクティス

   コンポーネント - examples/components/：

   • examples/components/button.md - Button コンポーネント
   • examples/components/input.md - Input コンポーネント
   • examples/components/form.md - Form コンポーネント
   • examples/components/table.md - Table コンポーネント
   • examples/components/modal.md - Modal コンポーネント
   • examples/components/toast.md - Toast コンポーネント
   • examples/components/loading.md - Loading コンポーネント
   • examples/components/picker.md - Picker コンポーネント
   • examples/components/tabs.md - Tabs コンポーネント
   • examples/components/navbar.md - Navbar コンポーネント
   • examples/components/grid.md - Grid コンポーネント
   • examples/components/card.md - Card コンポーネント
   • examples/components/badge.md - Badge コンポーネント
   • examples/components/swiper.md - Swiper コンポーネント
   • examples/components/list.md - List コンポーネント

   ツール - examples/tools/：

   • examples/tools/toast.md - Toast ツール（$u.toast）
   • examples/tools/http.md - Http ツール（$u.http）
   • examples/tools/storage.md - Storage ツール（$u.storage）
   • examples/tools/route.md - Route ツール（$u.route）
   • examples/tools/debounce.md - デバウンスツール
   • examples/tools/throttle.md - スロットルツール

   高度な機能 - examples/advanced/：

   • examples/advanced/theme-customization.md - uView UI テーマのカスタマイズ
   • examples/advanced/uniapp-integration.md - UniApp との統合

3. 構文、構成、ベストプラクティスについては、そのサンプルファイルの具体的な指示に従ってください。

   重要な注意事項：

   • すべてのサンプルは uView UI Vue 2.0 API に準拠しています
   • サンプルでは uni-app の構文を使用しています
   • 各サンプルファイルには、主要な概念、コード例、重要なポイントが含まれています
   • ベストプラクティスや一般的なパターンについては、必ずサンプルファイルを確認してください
   • uView UI は uni-app（H5、小プログラム、App）向けに設計されています

4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照してください。

   • api/components.md - コンポーネント API リファレンス
   • api/tools.md - ツール API リファレンス（$u メソッド）
   • api/theme-variables.md - テーマ変数 API

5. templates/ ディレクトリのテンプレートを使用してください。

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

ドキュメントマッピング (公式ドキュメントとの一対一対応)

ガイド (指南):

• examples/guide/ または examples/getting-started/ 内のガイドファイルを参照してください → https://www.uviewui.com/guide/demo.html

コンポーネント (组件):

• examples/components/ 内のコンポーネントファイルを参照してください → https://www.uviewui.com/components/intro.html

サンプルとテンプレート

このスキルには、公式ドキュメントの構成に対応するように整理された詳細なサンプルが含まれています。すべてのサンプルは examples/ ディレクトリにあります (上記のマッピングを参照してください)。

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

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

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

• 一般的な雛形については templates/ ディレクトリ内のテンプレートを参照します
• テンプレートを特定のニーズやコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリで利用可能で、公式の uView UI API ドキュメントの構成に対応するように整理されています:

コンポーネント API (api/components.md)

• すべてのコンポーネントの props と API
• コンポーネントのイベントとスロット
• コンポーネントの型とインターフェース

ツール API (api/tools.md)

• $u オブジェクトのメソッド
• Toast、Http、Storage、Route ツール
• ユーティリティ関数

テーマ変数 API (api/theme-variables.md)

• SCSS 変数
• テーマカスタマイズ変数
• カラー変数

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

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

ベストプラクティス

1. uView UI をインポートする: main.js で Vue.use() を使って uView UI をインポートします
2. スタイルをインポートする: App.vue で uView UI のスタイルをインポートします
3. easycom を使用する: コンポーネントを自動登録するために pages.json で easycom を設定します
4. $u ツールを使用する: ユーティリティ関数には $u オブジェクトを使用します
5. テーマカスタマイズ: SCSS 変数を介してテーマをカスタマイズします
6. UniApp 互換性: 複数のプラットフォーム (H5、小程序、App) でテストします
7. レスポンシブデザイン: レスポンシブなレイアウトには rpx 単位を使用します
8. コンポーネント構成: 複雑な UI のためにコンポーネントを組み合わせます
9. パフォーマンス: uni-app のパフォーマンスを最適化します
10. アクセシビリティ: uni-app のアクセシビリティガイドラインに従います

リソース

• 公式ウェブサイト: https://www.uviewui.com/
• はじめに: https://www.uviewui.com/guide/demo.html
• コンポーネント: https://www.uviewui.com/components/intro.html
• UniApp プラグイン: https://ext.dcloud.net.cn/plugin?id=1593
• GitHub リポジトリ: https://github.com/umicro/uView

キーワード

uView UI、uView、uni-app、Vue 2、コンポーネント、Button、Input、Form、Table、Modal、Toast、$u、ツール、テーマ、カスタマイズ、组件库、按钮、输入框、表单、表格、模态框、提示、工具函数、主题定制