【Vue.js】Vue-CLI を用いた開発環境の構築の仕方

#Vue-CLI を用いた開発環境の構築
Vue-CLI を使うことによって、**単一コンポーネントファイル**や、**Vrouter**、**Vue Store** などの
機能があるプロジェクトを簡単に構築することができます。
Vue-CLI を入れるために、いくつか必要なパッケージをダウンロードします。 


#Homebrew のインストール
**Homebrew はパッケージ管理ツール**です。 
[公式サイト](https://brew.sh/index_ja.html) MAC OS の様々なパッケージを管理できます。

Homebrew をインストールするには、Xcode コマンドラインツールが必要となるため、
先に以下のコマンドをターミナルから実行しましょう。

```
$ xcode-select --install
```
次に以下のコマンドで Homebrew をインストールします。

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

インストールがうまくいけば、$ brew -vとうてば、Homebrew のバージョンが出力されるはずです。

```
$ brew -v
Homebrew 2.4.0-33-g91b4d45
```

#nodebrewのインストール
まず、nodebrewのインストールが必要になります。 以下のコマンドをうってください。

```
$ brew install nodebrew
```
インストールができていたら、$ nodebrew -vでバージョンが出力されるはずです。

```
$ nodebrew -v

nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

```

#node.js をインストール
次に、node.js をインストールしましょう。 以下のコマンドで、安定版の node.js をインストールできます。

```
$ nodebrew install-binary stable
```
成功したら、以下の文字が表示されます。

```
Installed successfully
```

次に、node.js を使える状態にします。 以下のコマンドで、インストールされている node.js の一覧が表示されます。

```
$ nodebrew ls
v14.4.0

current: none
```
表示されているバージョンを使える状態にします。

```
$ nodebrew use v14.4.0
```

以下のコマンドをうってみて、

```
$ echo $SHELL
```

bash という文字があれば以下のコマンドを打ちます。

```
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
```

zsh という文字があれば、以下のコマンドを打ちます。

```
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
$ source ~/.zshrc
```
以下のコマンドをうってみて、バージョンが表示されれば成功です。

```
$ node -v

v14.4.0
```
#Vue-cli のインストール
以下のコマンドを打ちます。

```
$ npm install -g @vue/cli@4.4.3
```
以下のコマンドで、バージョンが表示されれば成功です。

```
$ vue --version
@vue/cli 4.4.3
```

#プロジェクトを作成
ここまでで、Vue-cliがインストールできたと思うので、Vue-cli を使って開発環境を構築してみましょう。

まずは、コマンドラインで、作業が行えるディレクトリまで移動しましょう。

```
$ cd ~/path/to/workspace
```

プロジェクトの作成は、vue createコマンドを使います。 vue create 【アプリ名】でプロジェクトが作成できます。

まずは試しにsample-appという名前で作成しましょう。

```
$ vue create sample-app
```

コマンドを打ったら以下の表示が出るかと思います。

![LjrCah.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/84d178a0-6bba-65d8-0688-286411fe16ae.png)

これは、どのようなプリセットでプロジェクトを作るかの選択になります。

default (babel, eslint)だとデフォルトの、babel と, eslint を用いたプロジェクトができます。
Manually select featuresは、個別でプリセットを選択できます。
今回は個別でセレクトしたいので、**Manually select features**を選択してください。
※矢印キーで移動し、エンターキーで選択できます。

次は、使用するプリセットを選択します。 

今回は新たに、**Router**、**Vuex**、**CSS Pre-processors**を使用したいので、それぞれ選択します。 
![rdVdAG.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/bc68678c-d471-3592-4c3f-016e838e4ca1.png)

選択できたらエンターキーを押しましょう。

![JFpBXp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/b9904bd6-ac2a-302a-e90e-f4a810893668.png)
次は、ルーターのヒストリーモードを選択できます。 そのままエンターで大丈夫です。![mGpEjK.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/640cb42e-c681-806e-1106-05c812292248.png)
次は、CSS プリセッターの選択をします。エンターで一番上を選択してください。![ATndNy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/9588ff0f-713f-4066-abd9-8e8068dc10d3.png)

次は構文のチェックを行ってくれる、Lint の初期設定を行います。
 今回はエラーチェックのみを行うerror prevention onlyを選択してください。
![546e5a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/fdba9197-2233-c180-1ad7-84c282ebbd30.png)
次は、Lint の実行タイミングを選択します。 Lint on save を選択してください。
![kGS5m3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/166c14c5-299b-afdb-0c65-e5081e9eb50c.png)
全ての設定が完了したので、プロジェクトの作成が開始します。![4Hz8ea.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/e8558944-cf86-d1fc-f60d-13ac26f1da0a.png)
完了したら、以下のようになります。
![8wKSkP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/168a5f37-eefd-fbd4-31f6-f51d7dd0c7c1.png)
最後にサーバーを起動して、ブラウザで表示してみましょう。 以下のコマンドでサーバーが起動できます。

```
$ npm run serve
```

以下のような表示になるので、ブラウザで、localhost:8080を開いてみましょう。
![aT4yaP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/e0c7f2e2-e5fe-c599-2f05-69a63ae92772.png)
うまくいっていれば、以下のように表示されます。![aG63H7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/a7ca8e5d-4709-be07-75b9-b3454920ad39.png)
サーバーを停止したい場合は、crl + Cを押して下さい。

**これで開発環境が出来上がりました。**

#おまけ

VScode の拡張機能をインストールしましょう。 開発に便利な、自動補完機能など、いくつかの拡張機能がまとめてインストールできます。

[Vue.js Extension Pack - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mubaidr.vuejs-extension-pack)

ディレクトリ構造は、初期の状態だと、以下のようになっているかと思います。

```
sample-app
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
        ├── About.vue
        └── Home.vue
```