実家でコーディングがしたかったので、Vue.jsの開発環境を構築してみた。

実家のWindows環境でVue.jsのコーディングをするための環境を用意しました。
開発って何それ？って感じの普通の家なので、Gitあたりからインストールしないといけない。。

- Visual Studio Code
- Git for Windows
- nodist
- Yarn
- vue-cli

あたりをインストールするとこまでやりました。

## 1. VSCodeのインストール

[公式](https://code.visualstudio.com/)からダウンロードしてインストールしました。

プラグインはいったん以下をインストール(バージョンは登録時点でのものです)。

- `Japanese Language Pack for VS Code 1.40.2`
- `Material Theme 30.0.0`
- `Material Icon Theme 3.9.1`
- `Git History 0.4.6`
- `ESLint 1.9.1`
- `Vetur 0.22.6`
- `Vue Peek 1.0.2`
- `Debugger for Chrome 4.12.1`

## 2. Gitのインストール

Windowsは[Git for Windows](https://gitforwindows.org/)でGitをインストールするようです(詳しく知らない...)。

WindowsでGitを扱うときは改行コードに気を付けないといけないので、[この記事](https://qiita.com/kouares/items/720d377c83cf75aea027)を参考にしてインストールしました。
ググったらProgateとかは`Checkout Windows-style`でしたが、古いんですかね？知っている方いたら教えてください。

とりあえず以下を選択しておきました。

- `Use Visual Studio Code as Git's default editor`
- `Git from the command line and also from 3rd-party software`
- `Use the OpenSSL library`
- `Checkout as-is, commit Unix-style line endings`
- `Use MinTTY (the default terminal of MSYS2)`

```bash
$ git --version
git version 2.24.0.windows.2
```

ついでにユーザ情報を登録しましょう。

```bash
$ git config --global user.name trajanme
$ git config --global user.email sample@example.com
```

大文字小文字の違いを無視せず、ログで日本語が正しく表示できるようにしておきます。

```bash
$ git config --global core.ignorecase false
$ git config --global core.quotepath false
```

## 3. node.jsのインストール
パッケージ管理マネージャはyarn使ってるんですが、`Node.js 4.0`以上が必要なようなので、インストール。

Windowsだとnode.jsの管理ツールはnodebrewじゃなくて、nodistというのが一般的なようです。

[公式](https://github.com/nullivex/nodist/releases)の`NodistSetup-v0.9.1.exe`を押してダウンロードします。

```bash
$ nodist -v
0.9.1

$ node -v
v11.13.0
```

node.jsがインストールできました。

## 4. yarnのインストール
Vue-CLIをインストールするためのパッケージ管理マネージャとしてyarnをインストールします。

npmでいいや、って人は、飛ばして`npm install`してください。

yarnは[公式](https://yarnpkg.com/ja/)からインストールできます。

```bash
$ yarn -v
1.19.1
```

## 5. vue-cliのインストール

ようやくvue-cliをインストールするとこまできました。。

```
$ yarn global add @vue/cli
```

インストール後に`vue`が認識されなかったので、環境変数を追加しました。
(Git Bashを再起動してもうまくいかないなら、環境変数の可能性大)
追加すべき環境変数は、以下で調べることができます。

```bash
$ yarn global bin
```

環境変数に追加したら、Git Bashを再起動しましょう。

```bash
$ vue --version
@vue/cli 4.0.5
```

無事インストールできました。

## 6. プロジェクトの作成～デプロイ

`vue ui`を使うと、ブラウザで簡単にプロジェクトを作成できる。

```bash
$ vue ui
```

ブラウザで新規を選択すると、プロジェクト情報を入力するように言われます。

プロジェクトフォルダやパッケージマネージャを選択します。

![env01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215341/6ce92e16-7ecb-70ad-836e-3e5ba9380b29.png)

プリセットはデフォルトで。

![env02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215341/05d8df1d-9653-9364-d683-85cb13eb5151.png)

プロジェクトを作成したら、タスクから`serve`を選択して、「タスクの実行」を押下します。

![env03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215341/0c09cb32-b756-ce90-763f-f5e6cfcf917b.png)

`http://localhost:8080/`にアクセスすれば、サービスがデプロイされたことを確認できます。

![env04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215341/34b0e0d1-69cb-d134-d596-165641ded4bd.png)

ちなみに、Visual Studio Code でプロジェクトフォルダを開けば、ソースを修正することができるようになっていることも確認できます。

![env05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215341/0bd8d6fb-9cd9-4969-ce8a-c6a345727a46.png)

## 8. GitHubへ登録

最後に、GitHubへpushするとこまでやります。

VS Codeで`Ctrl+Shift+P`を押してから`Terminal`と入力すれば、VS Codeにターミナルが出現します。

```bash
$ git remote add origin <githubのリポジトリURL>
$ git push -u origin master
```

SSHの秘密鍵とか用意しなきゃかなーと思ってたら、GitHubのログイン画面が出てきて、そのままpushできました。便利や。。

## おわりに
今回、iPad Proだとガッツリソースを修正するのやっぱり面倒だな、、と思い、Windowsでの環境構築をしてみたのですが、案外開発はできそうな感じですね。

何かアドバイスや、こうした方がいいなどあれば、ご教示ください。