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を使用するメリット

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

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

以下もご興味があるかもしれません: