【Vue】たった3ステップ、10分でできる Vue 2 のインストール・開発環境構築の方法まとめ（初心者向け）

概要

Vue.js 2 (v2.x) の環境構築を行う方法について備忘録
インストール〜起動方法までを３ステップにまとめて記載

参考: Vue の公式サイト（日本語版）はこちら

前提

インストール等の環境設定系は、完了していない場合は設定完了してから、後述の「手順」を実施してください。

• 対象バージョンは「Vue 2 (Vue.js v2.x）」
• PC にテキストエディタをインストール済み
  • 筆者は「Visual Studio Code (VS code)」を使用して説明
• Node.js をインストール済み
• Webブラウザが Internet Explorer (IE) の場合、「IE8」以下でないこと（サポート対象外のため）
• 主な手段として、CDN によるインストールと、NPM によるインストールがあるが、「NPM」を利用した内容を記載

手順

テキストエディタで、ターミナルツール（ツールメニュー「ターミナル」→「新しいターミナル」）を開き、
以降の手順で、インストールと Vue アプリの起動確認をします。

【Step 1】 開発支援ツール「Vue CLI」のインストール

以下のコマンドで「Vue CLI」をインストール

# Vue CLI インストール
npm install -g @vue/cli

※ -g オプションでグローバルインストール、忘れないように注意
※ エラーが発生した場合の対処法・参考記事は「こちら」

以下のような表示が出ればインストール完了

# インストールされたファイルのパッケージ数・かかった秒数などが表示される
added 156 packages, removed 192 packages, changed 741 packages, and audited 898 packages in 42s

インストール成功確認（任意のコマンドが正常に動作すればOK）

# バージョン確認コマンド
vue --version
# 実行結果
@vue/cli 5.0.4

【Step 2】 Vue アプリケーション生成

実際に Vue が動作可能かを確認します。

Vue アプリの生成コマンドは以下
（アプリケーション開発に必要な一連のファイル群をまとめて "プロジェクト" と呼びます）

vue create {任意のプロジェクト名}

試しに、適当なディレクトリを作成して、その中で以下のコマンドを実行し、
テスト用の Vue アプリを作成してみます。

# 「demo-app」という名前でプロジェクト作成
vue create demo-app

Vue CLI のバージョンによっては、実行すると以下のように「Vue 2」「Vue 3」どちらを作成するか質問されますので、カーソルキーで選ぶ

# バージョン選択を聞かれるので、v2.x を選択
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint) 
❯ Default ([Vue 2] babel, eslint) 
  Manually select features 

# 選択後に自動で生成処理を開始...
✨  Creating project in /Users/tommy/Desktop/VueTest/demo-app.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

⸨######⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⸩ ⠼ idealTree:@vue/babel-preset-app: timing idealTree:node_modules/

以下の様に表示されたら、生成完了

# 生成完了の表示
added 840 packages, and audited 841 packages in 29s

84 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
🚀  Invoking generators...
📦  Installing additional dependencies...


added 83 packages, and audited 924 packages in 5s

94 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project demo-app.
👉  Get started with the following commands:

 $ cd demo-app
 $ npm run serve

最後に表示されているのは、実際にPCで起動確認するためのコマンドです

【Step 3】 Vue アプリ起動・動作確認

プロジェクトを生成すると、コマンド実行した場所にディレクトリが作られます（今回の例だと「demo-app」）。
ここにコマンドで移動してから、起動コマンドを実行で動作します。

では、早速起動コマンドを実行

# 生成されたプロジェクトディレクトリに移動
cd demo-app

# アプリ起動
npm run serve

以下の表示で起動完了です。ただし、画面は自動で表示されませんので、自分でWebブラウザから開く必要があります。

 DONE  Compiled successfully in 3218ms                                                                 17:58:49

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.16:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

表示された「-Local」の URL を、Web ブラウザのアドレスバーに入力して、以下が表示されたら成功です。

※ アドレスバーに「http://localhost:8080/」をコピペ入力してからエンターキーで表示

アプリ停止方法

尚、起動したアプリを停止する方法は、ターミナル上で「Ctrl + C」を実行するだけです。
（起動直前の表示状態に戻ればOK）

あとは、実際に作成したテストアプリをいじりながら、Vue の仕組みや書き方を少しずつ理解していきましょう。