uview-pro-vue3

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

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

• uView Pro コンポーネントを使って Vue 3 ／ uni-app のモバイルインターフェースを構築する
• フォーム、データ表示、フィードバック、ナビゲーションのコンポーネントを使用する
• uView Pro のテーマ、国際化、グローバル設定を構成する
• 組み込みツール（HTTP リクエスト、ストレージ、ルーティング、バリデーション、フォーマット）を使用する
• 新しい uni-app プロジェクトに uView Pro をセットアップする

このスキルの使用方法

ワークフロー

1. インストール - npm install uview-pro を実行し、main.js に登録します
2. コンポーネントを選択 - UI の要件に合うコンポーネントを、以下のリファレンスから選びます
3. サンプルファイルを読み込む - 各コンポーネントには examples/components/ に詳しいサンプルがあります
4. ツールを使用 - examples/tools/ の組み込みユーティリティを活用します

クイックスタート：インストールと基本的な使い方

// 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 }
}

例：バリデーション付きフォーム

<template>
  <u-form :model="form" :rules="rules" ref="formRef">
    <u-form-item label="Username" prop="name">
      <u-input v-model="form.name" placeholder="Enter username" />
    </u-form-item>
    <u-form-item label="Email" prop="email">
      <u-input v-model="form.email" placeholder="Enter email" />
    </u-form-item>
    <u-button type="primary" @click="submit">Submit</u-button>
  </u-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formRef = ref(null)
const form = reactive({ name: '', email: '' })
const rules = {
  name: [{ required: true, message: 'Name is required' }],
  email: [{ required: true, message: 'Email is required' }, { type: 'email', message: 'Invalid email' }]
}

const submit = () => {
  formRef.value.validate(valid => {
    if (valid) uni.showToast({ title: 'Success!' })
  })
}
</script>

コンポーネントのカテゴリ

カテゴリ	コンポーネント	サンプルファイル
フォーム	Button、Input、Form、Select、Switch、Checkbox、Radio、Upload	examples/components/form.md
表示	List、Card、Avatar、Badge、Tag、Empty	examples/components/list.md
フィードバック	Toast、Modal、Loading、Popup、Drawer	examples/components/modal.md
ナビゲーション	Tabs、NavBar、Pagination、Dropdown	examples/components/tabs.md

ツールのリファレンス

ツール	ファイル	用途
HTTP	examples/tools/http.md	インターセプター付きのリクエストラッパー
Storage	examples/tools/storage.md	ローカルストレージのユーティリティ
Router	examples/tools/router.md	ナビゲーションヘルパー
Validator	examples/tools/validator.md	フォームのバリデーション

API リファレンス

• api/component-api.md - コンポーネントの props、イベント、メソッド、スロット
• api/tools-api.md - ユーティリティ関数のシグネチャとパラメーター
• api/config-api.md - グローバル設定とテーマ設定

ベストプラクティス

1. 必要なものだけをインポート - 使用するコンポーネントだけをインポートして、バンドルサイズを削減します
2. Composition API - Vue 3 のコードをよりすっきりさせるため、<script setup> を優先します
3. テーマ変数 - CSS を上書きするのではなく、uView のテーマ設定でカスタマイズします
4. 組み込みツールを使用 - 追加の依存関係を加えるのではなく、HTTP、ストレージ、ルーティングのユーティリティを活用します
5. 実機でテスト - H5 だけでなく、実際のモバイルデバイスで uni-app の動作を確認します

リソース

• 公式ドキュメント：https://uviewpro.cn/

キーワード

uView Pro、uview-pro、Vue 3、uni-app、コンポーネントライブラリ、コンポーネントライブラリ、Button、Form、List、Modal、Tabs、NavBar、モバイル UI、フォーム、リスト