ショップ

企業向け

世界で最も人気のあるVue.jsフレームワークVuetifyを始めましょう。豊富な機能を備えた非常に高速なアプリケーションを構築できます。

Vue CLI 3は、アプリケーション構築の複雑さを抽象化するために作られた次世代のcliツールです。 Vue CLI 3を使用してアプリを起動すると、公式のwebpackの更新と構成の変更、および面倒なアップグレードプロセスなしでVuetifyを更新することもできます。

新しいVue.jsプロジェクトをまだ作成していない場合は、次のように入力することで ** Vue CLI 3 ** を使用し、新規作成できます。

プロジェクトの初期化が終わったら、CLI を使用して Vuetify パッケージ を追加することができます。

Vuetifyは、Vue CLI 3の新しいビジュアルアプリケーションである** Vue UI **を使用してインストールすることもできます。VueCLIの最新バージョンがインストールされていることを確認してから、ターミナルに次のコマンドを入力します:

これにより、Vue のユーザーインターフェイスが実行され、 新規ウィンドウ がブラウザで開きます。ページ左側の プラグイン をクリックします。そして Vuetify と入力して検索してください。

Vuetify プラグインのインストール

Vuetifyを追加するには、[Nuxt Vuetifyモジュール] (https://github.com/nuxt-community/vuetify-module) をインストールします。

インストールしたら、 nuxt.config.jsファイルを更新して、ビルドにVuetifyモジュールを含めます。

Nuxtのインストールの詳細については、[公式ドキュメント] (https://nuxtjs.org/) をご覧ください。

VuetifyをWebpackプロジェクトにインストールするには、いくつかの依存関係を追加する必要があります。

インストールしたら、 webpack.config.jsファイルを見つけて、以下のスニペットを rules 配列にコピーします。既存の sass ルールが設定されている場合、以下の変更の一部またはすべてを適用する必要があります。ツリーシェーキングに vuetify-loader を使用する場合は、Webpackのバージョン >=4であることを確認してください。 [A-la-carte] (/customization/a-la-carte#vueconfigjs-installation) ページでwebpackを使用した設定の詳細を見つけることができます。

Vuetify用のプラグインファイル、 src/plugins/vuetify.js を以下の内容で作成します。

Vue インスタンスを初期化しているアプリケーションの main エントリーポイントに移動して、Vuetify オブジェクトをオプションとして渡してください。

Vuetify は Google の Roboto フォントおよび Material Design Icons を使用します。これらをインストールする最も簡単な方法は、メインの index.html に CDN を含めることです。

他のアイコンフォントの使い方やさらなる情報については Icons を参照してください。

Vue CLIのテンプレートを使わずにVuetify.jsを試すには、下記のコードをindex.htmlに貼り付けてください。最新のVueとVuetifyを使って、コンポーネントを試すことができます。codepenのVuetify starterを使うこともできます。おすすめはされていませんが、もし本番環境でCDNパッケージを利用する場合は、アセットのバージョンを指定するようにしましょう。詳しいやり方はjsdelivrを参照してください。

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

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