はじめてのVue.js ～Windows10にVue.jsをインストールし、プロジェクトを作成するまで

Windows10を搭載したPCに”Vue.js”をインストールする機会がありましたので、”Vue.js”をインストールしプロジェクトを作成するまでの手順を残しておきます。インストールするオプションを省略すれば、短時間で環境をつくることができますので、さくっと終わらせてしまいましょう。

Vue.jsをインストールする環境

一応、環境情報を書いていますが、バージョンはインストールする時点での最新バージョンをインストールするので、環境情報については参考程度で流してしまってください。

OS:　Microsoft Windows 10 Pro
OSバージョン：　10.0.18363 ビルド 18363
Vue.jsのバージョン：　4.5.11
Node.js：　14.15.4
npm：　6.14.10

では、さっそく”Vue.js”の環境をつくっていきましょう。

Vue.js環境をつくる

1.Node.jsのインストール

Vueをインストールする為には、npmが必要になりますので、Node.jsをインストールします。Node.jsの公式ページにアクセスし、Windows(x64)の「LTS 推奨版」をクリックし、Node.jsのインストーラーをダウンロードします。

LTSとは、Long Time Supportの意味で、長期のサポート期間を意味していますので、検証などで最新版を選択しなければならない事情などが無い場合はLTSを選んでおくのが良いでしょう。

Node.js LTS 推奨版をダウンロードします。

2.インストーラを実行

Windowsは実行可能なファイルを実行しようとする場合、以下のようなアラートが表示されますが、気にせず「OK」ボタンをクリックし、Node.jsのインストーラを実行します。

3.Node.jsのインストーラを起動

Node.jsのインストーラを起動すると、セットアップウィザード画面が表示されますので「Next」ボタンをクリックし、インストール作業を進めます。

Node.js セットアップウィザード

3-2.Tool for Native Modules

「Optionally Install the tools necessary to compile native modules」モジュールのインストールを選択する画面が表示されますが、ここで✔を入れるとNode.jsのインストール後に関連ツールのインストールが始まってしまい、環境によっては十数分待たされてしまう可能性がありますので、時間的に余裕がある場合を除いて、ここで✔を入れるのは省略します。

余談　Automatically install the necessary・・・をチェックすると

因みに、余談ですが、上記の「Automatically install the necessary・・・」をチェックすると以下画面が表示され、Installation Script が走り、永遠と待たされることになります。( ;∀;)

無事にインストールが完了したら、「Finish」ボタンをクリックします。

4.Nodeとnpmの確認

Node.jsのインストーラによるインストールが完了したら、念の為、Node.jsとnpmが正常にインスト―ルされているかバージョン情報を表示し確認しておきます。

Node.jsとnpmのバージョン確認のコマンドは以下の通りです。

node --version
npm --version

無事、Node.が「v14.15.4」、nmpが「6.14.10」と表示されました。

5.vueのインストール

ここからが、やっと本題の「Vue」のインストールです。

今回はコマンドラインから、”@veu/cli”をインストールします。

‐gはパッケージグローバルインストール

npm install の後の” -g ”は、グローバルインストールのオプションです。以下のように省略せずに入力しても問題ありません。

npm install --global パッケージ名

-g/–globaleの後に入力したいパッケージをド忘れしたら、キーボードにあるTabキーを押してみましょう。”.aws”とか”.azure”といった感じで補完しれくれます。

補足：パッケージのアンインストール

ついでなので、パッケージのアンインストールの方法を補足しておきます。”uninstall”を”un”と省略してしまってもOKです。

npm uninstall パッケージ名
npm un パッケージ名

6.Vueのバージョン確認

vueのインストールが完了したら、Vueが正常に完了したことを確認する為、バージョンの確認をしておきます。

Version 4.5.11と無事に表示されました。因みに今回のインストール方法ではVeuの最新バージョンがインストールされます。

7．プロジェクトの作成

以下のコマンドでプロジェクトを作成することができます。”プロジェクト名”の部分は適当な名前を入力してください。

vue create プロジェクト名

8.プロジェクトを作成する際に表示されるオプション

vue createコマンドを叩くと、対話モードで３つのオプションを選択画面が表示されます。

上から順番に

Veu2：2016年リリース
Veu3：2020年リリース　スピードやメンテナンス性が向上されていると言われてる。
マニュアル

今回は、自動で簡単に環境をしたいので、マニュアルは除外します。次に最新版であるVeu3を選択したいところですが、Vue3はPreview版となっていますので、安定性を重視し今回はVue2を選択します。

9.プロジェクトの起動

プロジェクトの作成が完了したら、作成したプロジェクト配下に移動し、”npm run serve”コマンドでプロジェクトを起動します。

cd プロジェクト名
npm run serve

プロジェクトの起動が完了すると、「http://localhost:8080/」もしくは「http://x.x.x.x:8080 」※x.x.x.xはローカルアドレス

と表示されますので、ブラウザを立ち上げ、上記アドレスにアクセスしプロジェクトの起動画面を確認します。

プロジェクトの起動完了を確認

以下の画面が表示されたら、プロジェクトは正常に起動されました。

Windows10へのVeu.jsのインストール作業はここまでです。

余談

Vue.jsは名前の通り、ビューに優れたJavascriptフレームワークです。Javascriptフレームワークは、Vue以外にもFACEBOOが開発したReactやGoogleが開発したAngulerなどがあります。

フルスタック感のあるAngulerに対し、比較的導入が簡単でjQueryなどに親しんできたフロントエンドユーザーにとっては比較的入りやすいJavascriptフレームワークであるのが、Vue.jsです。

世の中のサービスリリースの速度が高速化し、短い期間での開発を求められる昨今のマーケットを考えると、Vue.jsはフロントのすべてを網羅するとは決して言えませんが、マーケットのニーズに答えることができるフレームワークです。手元に遊んでいるmacやPCがありましたら、Vueの環境をつくって遊んでみると面白いかもしれません。

お疲れ様でした。