【Vue.js】Viteを使用した開発環境構築手順

2023年8月27日 21:27

VSCodeでViteを使用してVue.js開発環境を設定する手順をまとめます。
- 更新：2024年5月

環境

インストールに際してはPowerShell（≠WindowsPowerShell）、ターミナルおよびwingetを使用します。必要に応じて以下の記事を参照してインストールして下さい。

npmを使用するためNode.jsをインストールします。

winget install -e --id OpenJS.NodeJS

下記コマンドでグローバルにViteをインストールします。
"-g"の部分がグローバルにインストールするオプションになります。

npm install -g create-vite

ウィザード形式で行うcreate vueコマンドとプロジェクト作成のみ行うcreate viteコマンドがあります。ここでは両方を紹介します。

どちらか一方の実行でokですが、特に制限がなければ用途に合わせて状態管理ライブラリやテストフレームワークを指定することができるcreate vueコマンドが個人的に楽だと思います。

以下のコマンドを実行します。

npm create vue@latest

使用するライブラリを尋ねられるので、用途に合わせて選択していきます。
特にこだわりがなければ下記の通り指定するといいと思います（青字部分）。プロジェクト名は任意でokです。

以下のコマンドを実行してプロジェクトを作成します。my-first-vueの部分がプロジェクト名になります。

npm create vite@latest my-first-vue -- --template vue

サーバー起動のためcdコマンドで作成したプロジェクトへ移動します。

cd [プロジェクト名]

下記のコマンドを実行して開発サーバーを起動します。

npm install
npm run dev

"npm install"：package.jsonにリストされているすべての依存パッケージ（dependenciesとdevDependencies）を node_modules ディレクトリにインストールする。
"npm run dev"：開発サーバーを起動。

ターミナルに以下の通り表示されているはずなので、Localに記載されているURLをctrl + クリックで開くか直接ブラウザのURL欄に張り付けてアクセスします。

VITE v4.4.9  ready in 266 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

下記の画面が表示されていればokです。

・公式ドキュメントはこちら