Vue CLIでVue.jsの開発環境を構築する手順

Last updated at 2024-10-24Posted at 2024-10-09

はじめに

この記事はVue.jsの開発環境を構築する手順を学習した際の備忘録です

Vue.jsを使うためには、Node.jsとnpm（Node Package Manager）をPCにインストールする必要があるので、まずは以下の手順でインストールします

Node.jsの公式サイトにアクセスして自分のOSに適したインストーラーをダウンロードおよび実行します。

Node.jsをインストールすると、自動的にnpm（Node Package Manager）も一緒にインストールされているため、次のコマンドでバージョンを確認することでインストールの状況を確認できます

npm -v

コマンドライン（ターミナル）を使ってプロジェクトの作成や管理を簡単に行うためのツールです。正式名称はVue Command Line Interfaceです

Node.jsとnpmがインストールされていれば以下のコマンドでインストールを実行できます

npm install -g @vue/cli

以下のコマンドをコマンドライン（ターミナル）にて実行すると、Vue CLIがインストールされている場合は、バージョン番号が表示されます（例: @vue/cli 5.0.8）インストールされていない場合やコマンドが認識されない場合は、Vue CLIがまだインストールされていないということになります

vue --version

プロジェクトを作成したいディレクトリに移動します。例えば、デスクトップに作りたい場合は次のコマンドを実行します

cd ~/Desktop

新しいVue.jsプロジェクトを作成するために、以下のコマンドを実行します

vue create my-vue-app

Vue CLIでは、プロジェクト作成時に以下の3つの選択肢が表示されます。詳細は以下で説明しますが、通常は最新のVue 3を選択します（エンターキーで選択できます）

最新のVue3を使った標準的な設定です
プロジェクトにはBabel（モダンなJavaScriptコードを古いブラウザでも動くように変換するツール）とESLint（コードの品質をチェックし、エラーを防ぐツール）が組み込まれます
初心者から上級者まで、Vue3を使いたい場合はこの設定で始めるのが最適です

この設定はVue 2を使うプロジェクトを作成します
Vue 2を使う理由としては、既存のプロジェクトやライブラリとの互換性が必要な時などに利用します。例えば、まだVue 3に対応していないライブラリを使いたい場合や、古いプロジェクトのメンテナンスが目的の場合などです。
BabelとESLintは同様に含まれますが、Vue2のプロジェクトを新しく始める場合に選びます

作成したプロジェクトにカレントディレクトリを合わせ、開発サーバーを起動します

cd my-vue-app

npm run serve

コマンドを実行すると開発サーバーが立ち上がり、ターミナルにURLが表示されます
（通常は http://localhost:8080 です）

開発サーバーを起動するコマンドに、オプションを加えることでポート番号を変更することができます。また、ポート8080（デフォルト）や指定したポート番号がすでに他のアプリケーションによって使用中の場合はエラーが発生するので、その場合は使用していないポート番号を指定することでエラーを回避できます

npm run serve -- --port 3000

開発サーバーを起動する際に、ホスト名を指定することもできます。以下のコマンドを実行します。

npm run serve -- --host 0.0.0.0 --port 3000

ブラウザでVue.jsのロゴが確認できれば開発環境の構築は終了です