😊
「Vuetify」が既に組み込まれたVue 3.jsプロジェクトの新規作成と「Vuetify」のアップデート方法
はじめに
ここではVuetifyが既に組み込まれたVue 3.jsプロジェクトの新規作成方法と、Vuetifyのバージョンアップデート方法についてをまとめます。なおVue 3.jsとVuetifyの説明は割愛します。
自分の作業環境
- Windows 11
- VSCode
- Node.js は既にインストール済み
新規プロジェクトの作成
まずはVSCodeを起動し、ターミナルでプロジェクトを作成するディレクトリに移動します（cd コマンドを使用）。
cd ここにファイルパス
次にnpm create コマンドを使ってVuetifyのプリセットを利用して新規プロジェクトを作成します。
npm create vuetify@latest
表示されるプロンプトに従い、プロジェクト名とインストールするプリセットを選択します。
自分はプリセットを「Recommended」、TypeScriptを使用を「Yes」、依存関係のインストール方法を選択を「npm」としました。
依存関係のインストールが完了すると、Vuetifyが組み込まれたVue 3プロジェクトが作成されます。
プロジェクトの起動
VSCodeでプロジェクトフォルダを開き、以下のコマンドで開発サーバーを起動します。
npm run dev
ブラウザでターミナルに表示されたURL（http:／／localhost:3000）にアクセスすると、Vuetifyのウェルカムページが表示されます。
Vuetifyを最新バージョンにアップデート
「package.json」ファイルを見てみたところVuetifyのバージョンが「3.6.11」となっていました。作業時点での最新バージョンは「3.6.14」ですので少々古いようです。
以下のコマンドでVuetifyに最新バージョンにアップデートします。
npm install vuetify@latest
package.json ファイルを確認し、Vuetifyのバージョンが更新されたらアップデート作業は完了です。
以上で、Vuetifyが組み込まれたVue 3プロジェクトの新規作成とVuetifyのバージョンアップデートが完了です。
Discussion