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. ユーザーのリクエストからトピックを特定します。

   • Getting started/快速开始 → 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 - Debounce ツール
   • examples/tools/throttle.md - Throttle ツール

   応用（高级）- 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、ツール、テーマ、カスタマイズ、组件库、按钮、输入框、表单、表格、模态框、提示、工具函数、主题定制