uview-pro-vue3

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

次のような場合は、このスキルを使用してください。

• uni-app プロジェクトに uView Pro をインストールしてセットアップする
• Vue 3／uni-app アプリケーションで uView Pro コンポーネントを使用する
• uView Pro（テーマ、i18n など）を設定する
• フォームコンポーネント（Button、Input、Form など）を使用する
• データ表示コンポーネント（List、Card など）を使用する
• フィードバックコンポーネント（Toast、Modal など）を使用する
• ナビゲーションコンポーネント（Tabs、NavBar など）を使用する
• uView Pro のツールとユーティリティを使用する
• uView Pro のレイアウトテンプレートを使用する
• コンポーネントのスタイルとテーマをカスタマイズする
• コンポーネントのイベントを処理する
• uView Pro の API とメソッドを理解する
• uView Pro の問題をトラブルシューティングする

このスキルの使い方

このスキルは、uView Pro の公式ドキュメントの構成に沿って整理されています（https://uviewpro.cn/、https://uviewpro.cn/zh/guide/intro.html、https://uviewpro.cn/zh/components/intro.html、https://uviewpro.cn/zh/tools/intro.html、https://uviewpro.cn/zh/layout/intro.html）。uView Pro を使用する際は、次の手順に従ってください。

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

   • インストール/安装 → examples/guide/installation.md
   • クイックスタート/快速开始 → examples/guide/quick-start.md
   • コンポーネント/组件 → examples/components/
   • ツール/工具 → examples/tools/
   • レイアウト/布局 → examples/layout/
   • API/API 文档 → api/

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

   ガイド（使用指南）：

   • examples/guide/intro.md - はじめに
   • examples/guide/installation.md - インストールガイド
   • examples/guide/quick-start.md - クイックスタートガイド
   • examples/guide/theme.md - テーマのカスタマイズ
   • examples/guide/i18n.md - 国際化
   • examples/guide/config.md - 設定

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

   • examples/components/intro.md - コンポーネントの概要
   • examples/components/button.md - ボタンコンポーネント
   • examples/components/input.md - 入力コンポーネント
   • examples/components/form.md - フォームコンポーネント
   • examples/components/list.md - リストコンポーネント
   • examples/components/card.md - カードコンポーネント
   • examples/components/toast.md - トーストコンポーネント
   • examples/components/modal.md - モーダルコンポーネント
   • examples/components/tabs.md - タブコンポーネント
   • examples/components/navbar.md - ナビゲーションバーコンポーネント
   • examples/components/date-picker.md - 日付ピッカーコンポーネント
   • examples/components/select.md - セレクトコンポーネント
   • examples/components/switch.md - スイッチコンポーネント
   • examples/components/checkbox.md - チェックボックスコンポーネント
   • examples/components/radio.md - ラジオボタンコンポーネント
   • examples/components/upload.md - アップロードコンポーネント
   • examples/components/pagination.md - ページネーションコンポーネント
   • examples/components/avatar.md - アバターコンポーネント
   • examples/components/badge.md - バッジコンポーネント
   • examples/components/tag.md - タグコンポーネント
   • examples/components/empty.md - 空状態コンポーネント
   • examples/components/loading.md - ローディングコンポーネント
   • examples/components/popup.md - ポップアップコンポーネント
   • examples/components/dropdown.md - ドロップダウンコンポーネント
   • examples/components/drawer.md - ドロワーコンポーネント

   ツール（工具）：

   • examples/tools/intro.md - ツールの概要
   • examples/tools/http.md - HTTP リクエスト
   • examples/tools/storage.md - ストレージユーティリティ
   • examples/tools/router.md - ルーターユーティリティ
   • examples/tools/validator.md - バリデーターユーティリティ
   • examples/tools/format.md - フォーマットユーティリティ
   • examples/tools/color.md - カラーユーティリティ

   レイアウト（布局）：

   • examples/layout/intro.md - レイアウトの概要
   • examples/layout/grid.md - グリッドレイアウト
   • examples/layout/flex.md - フレックスレイアウト
   • examples/layout/container.md - コンテナーレイアウト

3. 構文、構成、ベストプラクティスについては、該当するサンプルファイルの個別の指示に従います

   重要な注意事項：

   • uView Pro は Vue 3 と uni-app 向けです
   • コンポーネントでは Vue 3 Composition API を使用します
   • サンプルには Options API と Composition API の両方が含まれています
   • 各サンプルファイルには、主要な概念、コード例、要点が含まれています

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

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

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

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

1. uView Pro の概要

uView Pro は、uni-app 開発向けに設計された Vue 3 コンポーネントライブラリで、豊富なコンポーネントとユーティリティメソッドを提供します。

主な概念:

• Vue 3 対応: Composition API を使用した Vue 3 向けの設計です
• uni-app 対応: uni-app 開発に最適化されています
• 豊富なコンポーネント: さまざまな用途に対応する 100 以上のコンポーネントを提供します
• テーマのカスタマイズ: テーマのカスタマイズに対応しています
• i18n: 国際化に対応しています
• ツール: 豊富なユーティリティメソッドを提供します

2. インストール

npm を使用する場合:

npm install uview-pro

yarn を使用する場合:

yarn add uview-pro

pnpm を使用する場合:

pnpm add uview-pro

3. 基本設定

// main.js
import { createSSRApp } from 'vue'
import uView from 'uview-pro'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uView)
  return {
    app
  }
}

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

ガイド:

• examples/guide/ または examples/getting-started/ のガイドファイルを参照してください → https://uviewpro.cn/zh/guide/intro.html

コンポーネント:

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

サンプルとテンプレート

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

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

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

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

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

API リファレンス

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

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

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

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

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

ツール API（api/tools-api.md）

• HTTP リクエストメソッド
• ストレージメソッド
• ルーターメソッド
• バリデーターメソッド
• フォーマットメソッド
• カラーメソッド

設定 API（api/config-api.md）

• グローバル設定オプション
• テーマ設定
• i18n 設定

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

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

ベストプラクティス

1. 必要な分だけインポートする: バンドルサイズを削減するため、必要なコンポーネントのみをインポートします
2. Composition API を使用する: コードを整理しやすくするため、Composition API の使用を優先します
3. イベントを適切に処理する: コンポーネントの操作には適切なイベントハンドラーを使用します
4. テーマをカスタマイズする: カスタマイズにはテーマ変数を使用します
5. デザイン仕様に従う: uView Pro のデザイン仕様に従います
6. ツールを使用する: 一般的な操作には uView Pro のツールを活用します
7. レイアウトを使用する: ページ構成の一貫性を保つため、レイアウトテンプレートを使用します

リソース

• 公式ドキュメント: https://uviewpro.cn/
• ガイド: https://uviewpro.cn/zh/guide/intro.html
• コンポーネント: https://uviewpro.cn/zh/components/intro.html
• ツール: https://uviewpro.cn/zh/tools/intro.html
• レイアウト: https://uviewpro.cn/zh/layout/intro.html

キーワード

uView Pro, uview-pro, Vue 3, Vue3, uni-app, UI コンポーネント, コンポーネントライブラリ, ボタン, フォーム, リスト, カード, トースト, モーダル, タブ, ナビゲーションバー, 日付ピッカー, セレクト, スイッチ, チェックボックス, ラジオボタン, アップロード, ページネーション, アバター, バッジ, タグ, 空の状態, ローディング, ポップアップ, ドロップダウンメニュー, ドロワー, HTTP, ストレージ, ルーティング, バリデーション, フォーマット, 色, グリッドレイアウト, フレックスレイアウト, コンテナレイアウト, Button, Form, List, Card, Toast, Modal, Tabs, NavBar, DatePicker, Select, Switch, Checkbox, Radio, Upload, Pagination, Avatar, Badge, Tag, Empty, Loading, Popup, Dropdown, Drawer