easycomモードでUNI-APPコンポーネントを呼び出す際に習得する必要がある実践的なスキル

easycomモードでUNI-APPコンポーネントを呼び出す際に習得する必要がある実践的なスキル

この記事は議論の出発点となることを目的としています。詳細なドキュメントと easycom の仕様については、uni-app の公式 Web サイトをご覧ください。 【ポータル】イージーコムモードの説明

easycom コンポーネント モードの紹介

  • Easycom コンポーネント モードは、HBuilderX 2.5.5 以降でサポートされています。 HBuiderX のバージョンが低い場合は、まずアップデートを確認してください。

uni-app は VUE をベースに開発されています。通常、最初にコンポーネントをインストールし、次にグローバルまたはローカルにインポートして登録します。その後、ページ内の対応するコンポーネントを使用できます。このプロセスはかなり面倒ですが、uni-app は easycom コンポーネント モデルを使用して上記の 3 つの手順を簡素化し、ユーザーがコンポーネントを参照または登録せずにページ上で直接使用できるようにします。もちろん、一定のeasycom仕様に従うことが前提ですが、実際の使用効果は次のとおりです。

<テンプレート>
    <ビュークラス="コンテナ">
        <ユニリスト>
            <uni-list-item title="最初の行"></uni-list-item>
            <uni-list-item title="2行目"></uni-list-item>
        </uni-list>
    </ビュー>
</テンプレート>
<スクリプト>
    // コンポーネントに uni-list コンポーネントをインポートしたり登録したりする必要はありません。テンプレートでは、export default {を直接使用できます。
        データ() {
            戻る {

            }
        }
    }
</スクリプト>

uni-app デフォルト easycom 仕様

上記のコード ブロックのようにページ内で直接コンポーネントを使用する場合は、コンポーネントをインストールしたり、コンポーネントをカスタマイズしたりするときに、次の仕様に従う必要があります。

  • コンポーネント ファイルはcomponentsディレクトリに配置する必要があります。
  • コンポーネントに対応する .vue ファイルは、コンポーネントと同じ名前のファイル ディレクトリに配置する必要があります。
  • テキストの説明はあまり明確ではないかもしれませんが、効果の画像を見てください。

ここに画像の説明を挿入

components/uni-swipe-action/uni-swipe-action.vue

カスタムコンポーネント配置ディレクトリ

  • uni-appのデフォルトのeasycom仕様では、コンポーネントをコンポーネントディレクトリに配置することになっています。
  • 同時に、uni-app では、コンポーネント配置のデフォルト ディレクトリと一致ルールを変更することもできます。

Easycom は自動的に有効になるため、手動で有効にする必要はありません。必要に応じて、自動スキャンをオフにしたり、スキャン マッチング コンポーネントの戦略をカスタマイズするなど、 pages.jsonの easycom ルーチンの設定をカスタマイズできます。パラメータを次のように設定します。

ルールの設定

公式リファレンスのカスタム構成ルールは次のとおりです。
[node_modules内のvueファイルを一致させる]

"イージーコム": {
  「自動スキャン」:true、
  "カスタム": {
    "uni-(.*)": "@/components/uni-$1.vue", // コンポーネント ディレクトリ内の vue ファイルに一致します "vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // node_modules 内の vue ファイルに一致します}
}

uVIew の構成ルールは次のとおりです。
[ uview/componentsディレクトリ内のu-で始まる uview コンポーネントに一致します]

{
	// これは追加する必要があるコンテンツです "easycom": {
		"^u-(.*)": "@/uview/components/u-$1/u-$1.vue"
	},
	
	// これは既存のコンテンツ「ページ」です: [
		// ......
	]
}

easycomを使用するメリット

  1. コンポーネントの使用を簡素化し、開発効率を向上
  2. コンポーネント ディレクトリにインストールされているコンポーネントの数に関係なく、easycom はパッケージ化後に未使用のコンポーネントを自動的に削除します。これは、コンポーネント ライブラリの使用に特に適しています。

これで、easycom モード開発で UNI-APP コンポーネントを呼び出すために習得する必要がある実践的なスキルに関する記事は終了です。easycom モード UNI-APP コンポーネントの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • easycomモードでUNI-APPコンポーネントを呼び出す際に習得する必要がある実践的なスキル
  • uni-app コンポーネントで要素の幅と高さを取得する実装

<<:  MySQL 数千万のビッグデータに対するSQLクエリ最適化の知識ポイントのまとめ

>>:  Linuxは数字当てゲームのソースコードを実装する

推薦する

MySQLテーブルパーティショニングプログラムを変更する方法

MySQLテーブルパーティショニングプログラムを変更する方法1. サブテーブルの実装の原則は次のとお...

Ubuntu 20.04 と NVIDIA ドライバーのインストールに関するチュートリアル

Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...

JS のディープコピーとシャローコピーの詳細

目次1. 浅いコピーとはどういう意味ですか? 2. ディープコピーとはどういう意味ですか? 3. デ...

mysql ルートユーザーを認証できず、Navicat リモート認証プロンプト 1044 の問題を解決します

まず解決策を見てみましょう #------------mysql の root ユーザーに権限を付与...

Docker共通コマンドの詳しい解説 Study03

目次1. ヘルプコマンド2. ミラーコマンド3. コンテナコマンド1. ヘルプコマンド1. 現在のD...

Vue 親コンポーネントが子コンポーネント関数の実装を呼び出す

Vue親コンポーネントは子コンポーネントの関数を呼び出す親コンポーネントはイベントを通じて子コンポー...

HTMLで下線を設定するには?HTMLでテキストに下線を付ける方法

HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...

MySQL 同時実行制御の原則に関する知識ポイント

Mysql は、高性能なデータ ストレージ サービスを提供する主流のオープン ソース リレーショナル...

Nodejs でモジュール fs ファイルシステムを使用する方法

目次概要ファイル記述子同期、非同期、Promise同期書き込み非同期書き込み(推奨)約束​​の書き方...

Vue-CLI3.xはプロジェクトをサーバーに自動的にデプロイします

目次序文1. scp2をインストールする2. テスト/本番環境サーバーのSSHリモートログインアカウ...

Dockerfile を使用して Node.js サービスをデプロイする方法

Dockerfileを初期化するプロジェクトの名前が express であると仮定して、expres...

IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法

1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...

Oracle10パーティションとMySQLパーティションの違いの詳細な説明

一般的に使用される Oracle10g パーティションは、範囲 (範囲パーティション)、リスト (リ...

Excelアップロード機能を実現するVue + iViewの完全コード

1. HTML部分 <Col span="2">ファイルをアップロー...

大規模なMySQLデータベース用のマスタースレーブシステムを構築するアイデアを共有する

今週は戦争のように忙しかったです。他人に操られているような気がします。毎日朝早く出勤して夜遅く帰り、...