Vuetify

ショップ

企業向け

Being a component framework, Vuetify will always grow horizontally. Depending on your project, a small package size may be a requirement. The A la carte system enables you to pick and choose which components to import, drastically lowering your build size. New projects created with the Vue CLI plugin have this enabled by default.

使用しているすべてのコンポーネントを追跡するのは非常に面倒です。 vuetify-loader は使用するすべてのVuetifyコンポーネントを、使用する場所で自動的にインポートすることで、この苦痛を軽減します。また、webpackは表示するチャンクに必要なコンポーネントのみをロードするため、コード分割がより効果的になります。

アラカルトコンポーネントを利用するには、vuetify/lib からVuetifyをインポートする必要があります。

推奨されませんが、Vue CLIプラグインの使用をオプトアウトし、代わりにVue CLIからconfigure webpack オプションを使用してローダーを手動で構成できます。

webpackベースのプロジェクトのローダーを明示的にインストールすることもできます。 vue.config.jsのセットアップと同様に、プロジェクトのwebpackプラグインにローダーを追加するだけです。

vuetify/libからインポートすると、ベースラインフレームワークのスタイルも取り込まれます。各コンポーネントは個別にスタイルを担当し、同じようにコンパイルされます。Vue CLI とvue-cli-plugin-vuetify プラグインを使用している場合は、この処理が自動的に行われるため、このセクションはスキップできます。cliにアクセスできないプロジェクトで作業している場合は、必要なパッケージを手動でインクルードすることができます。

インストール後も、.sassファイルをパースするように webpack.config.js を設定する必要があります。fibersでこれを行う方法の詳細については、公式ドキュメント をチェックしてください。

また、vuetify-loaderでは、独自のカスタムマッチ関数を記述して、独自のプロジェクトのコンポーネントをインポートすることもできます。これは、Vue CLI と webpack プロジェクトの両方で行うことができます。

`vuetify-loaderを使用する場合、コンポーネントの手動インポートが必要なシナリオがいくつかあります。

v-data-iterator は、content-tag propを介して任意のコンポーネントを使用できます。このコンポーネントは globally に登録する必要があります。

<component :is="my-component">で使用される動的コンポーネントは locally で登録できます:

機能コンポーネントは実行時に vue によってインライン化され、オプションに components プロパティを持つことはできません。カスタム機能コンポーネントで使用される Vuetify コンポーネントは、グローバルに登録するか (推奨)、またはカスタムコンポーネントを使用する場所にローカルで登録する必要があります。

Vuetify loaderを使用していない場合は、コンポーネントを手動でインポートできます。また、明示的な使用法のみをパースするので、動的コンポーネントと vuetify-loader を使用する場合にもこれを行います。これは一般的に、Vue <component is="my-component" /> でビルドされたコンポーネントを使用している場合に発生します。動的コンポーネントの詳細については、公式 Vue documentation をご覧ください。

以下に示すように、.vue ファイルのコンポーネントをインポートすることもできます。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!