Vue 環境をローカルに構築する基本手順

この記事では、ターミナルを使ってVueプロジェクトをローカルに構築する方法を、ステップごとに丁寧に解説します。Vue CLIではなく、Viteベースの最新の構築方法を取り上げ、依存関係の管理や開発サーバーの起動まで一通りの流れを紹介します。

Node.jsの確認

まず、Node.jsがインストールされているかを確認します。以下のコマンドをターミナルで実行してください。

node -v

バージョン番号が表示されればOKです。Node.jsがインストールされていない場合は、公式サイトからインストールしておきましょう。

次に、ViteベースでVueプロジェクトを作成します。

npm create vue@latest

コマンド実行後、以下のように対話形式で質問されます。

必要な機能を選んだら、エンターキーを押して進みます。

プロジェクトが作成されたら、次のコマンドでそのディレクトリに移動します。

cd プロジェクト名

続いて、依存パッケージをインストールします。

npm install

この操作で node_modules フォルダが生成され、ViteやVueなどの必要なライブラリが導入されます。

開発サーバーを起動するには以下のコマンドを使用します。

npm run dev

ブラウザで http://localhost:5173 などが開かれ、Vueアプリが表示されます。もし 「vite が見つかりません」 というエラーが出る場合は、viteが依存関係に含まれていないか、npm install を忘れている可能性があります。

もしプロジェクト作成時に機能を選ばなかった場合でも、後から追加可能です。例として、Vue Router と Pinia を追加するコマンドはこちらです。

npm install vue-router pinia

Vueプロジェクトの開発環境を構築する際は、以下の流れで作業を進めるのが基本です。

構築にあたっては、コマンドの打ち間違いや依存関係の不足に注意しながら、確実に一つずつ手順を進めましょう。