【Vue.js】10分でできる！ ～ Vue.jsのインストール → プロジェクト作成と起動まで～

WindowsにおけるVue.jsをインストール → プロジェクト作成までの手順です。
必要なツールのインストール → プロジェクトの作成、起動まで10分あればできちゃいます♪

## 環境

- Windows 10

※以下、本記事の手順でインストールします（2020年4月18日現在）。

- Vue.js：v2.6.11
- @vue/cli：v4.3.1
- Node.js：v12.16.2
- npm：v6.14.4



## 用語と解説

|用語|解説|
|---|---|
|Vue.js|JavaScriptをベースとしたUI構築のためのプログレッシブ（先進的な）フレームワーク|
|@vue/cli|Vue.jsで開発をするためのツール<br>CLIはもちろん、GUIも提供している|
|Node.js|サーバーサイドで動くJavascript<br>WindowsではインストーラによるNode.jsのインストールでnpmもインストールされる|
|npm|Node Package Managerの略<br>Node.jsのパッケージを管理するためのもので、<br>@vue/cliの使用に必要|


## 手順

### 1. Node.js（npm）のインストール
@vue/cliを使用するためには、npmが必要。
Windowsではインストーラによる、Node.jsのインストールで、npmもインストールされる。
というわけでまず、Node.jsをインストールします。

1. [Node.js公式サイト](https://nodejs.org/ja/)にアクセスし、インストーラをダウンロードします。特別な理由がない限り、LTS（推奨版）にするのがよいでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/cd8f4056-5ec4-38cd-c1f0-33460c0ecf20.png)

2.ダウンロードできたら、ダブルクリックしてインストーラを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/255c6cb6-fe1a-a049-e89c-74009a9c25fb.png)

インストール開始までは基本的に「Next」を押していくだけでOK。
補足の必要な箇所のみ、キャプチャをつけて解説していきます。

3.インストーラ起動から2画面めです。
内容を確認し、「I accept the terms in the License Agreement」にチェックを入れ、「Next」をクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/a8d83ec8-1fa6-19e5-f1d3-5971a815c2d4.png)

4.インストーラ起動から5画面めです。
「Automatically install the necessary tools.・・・」にはチェックを入れずに「Next」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/7134d98b-632c-fd37-5657-b4f9da8b7e7c.png)

※チェックを入れるとNode.jsインストール終了後に、関連ツールのインストールも始まり、時間がかかる＆エラーが出ることもあって手間なので、今回はパスします。

5.インストールが完了したら、コマンドプロンプトを起動し、Node.jsとnpmのバージョンを確認しておきましょう。

■実行コマンドと想定結果（Node.js）

```
> node --version
v12.16.2
```

■実行コマンドと想定結果（npm）

```
> npm --version
6.14.4
```


ここまでで約5分です。



### 2. @vue/cliのインストール
続いて、Vue.jsの開発ツール@vue/cliのインストールです。

1.コマンドプロンプトで以下のコマンドを実行します。

```
> npm install -g @vue/cli
```
-g により、グローバルインストールとなり、システムディレクトリにインストールされるそうです。
忘れると、エラーの原因になりますので注意しましょう。

2.完了したら、@vue/cliのバージョンを確認します。
■実行コマンドと想定結果

```
> vue --version
@vue/cli 4.3.1
```

#### 補足事項
@vue/cliデフォルトでは、最新版がインストールされますが、バージョンを指定してインストールすることも可能です。
その場合は、@vue/cliのうしろに有効なバージョンを付与します。
例えば、以下の通り。

```
> npm install -g @vue/cli3.7.0
```
なお、バージョンアップしたい場合は、対象のバージョンを指定して再度インストールコマンドを実行します。
最新版にしたい場合はバージョン指定しなくてOK！


@vue/cliのインストールは2分もあれば十分。


### 3. プロジェクトの作成と起動

1.コマンドプロンプトで任意のパスに移動し、以下のコマンドを実行します。

```
> vue create プロジェクト名
```
なお、半角英数字と一部記号（小文字のみ）以外を使うとエラーになりますのでご注意を。

2.以下のように選択肢が出ます。今回は、「default (babel, eslint)」のままEnter。
※上下矢印キーで切り替えができます。

```
? Please pick a preset:
> default (babel, eslint)
  Manually select features 
```

3.完了したら、作成したプロジェクト配下に移動します。
■実行コマンド

```
> cd プロジェクト名
```

4.せっかくなので、vueのバージョン確認もしておきましょう。
■実行コマンドと想定結果

```
> npm list vue
プロジェクト名@XXXフォルダパス
`-- vue@2.6.11
```

上記の場合は2.6.11がVue.jsのバージョンとなります。

5.プロジェクトを起動します。
■実行コマンドと想定結果

```
> npm run serve
```

「DONE Compiled successfully」と出れば、正常に起動できています。

6.ブラウザで[http://localhost:8080/](http://localhost:8080/)にアクセスし、以下のようなページが表示されたら、成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/5dab296c-f22d-cfea-85eb-f633444f5ea1.png)


デフォルトでのプロジェクト作成→起動なら、3分かからないはず！

#### 補足事項
作成したプロジェクトのプラグインをアップグレードする場合は対象プロジェクト配下にて、以下のコマンドを実行します。
■実行コマンド

```
> vue upgrade
```

## 終わりに
いかがだったでしょうか。
Vue.jsで開発するための最低限の準備がたった10分でできました。
これをベースに開発を進めていきましょう～！

## 参考

- [はじめに | Vue.js](https://jp.vuejs.org/v2/guide/)
- [OverView | Vue CLI](https://cli.vuejs.org/guide/)
- [@vue/cli | npm](https://www.npmjs.com/package/@vue/cli)
- [リリース一覧 | Node.js](https://nodejs.org/ja/download/releases/)
- [npm入門 | とほほのWWW入門](http://www.tohoho-web.com/ex/npm.html)
-[第１回 – Vue.jsをインストールして実際に触れてみよう！ | Swallow Incubate](https://swallow-incubate.com/archives/blog/20190408/)
- [Upgrade All Plugins at Once | Vue CLI](https://cli.vuejs.org/migrating-from-v3/#upgrade-all-plugins-at-once)

なお、トラブル発生時は、以下も参考になりました↓

- [npm installで失敗したときの5つの解決方法 | スギモトノート](https://sugimotonote.com/2017/10/31/npm-install-error/)