vue-cliを使って「Vue.js+Typescript」環境を最短手番で構築する

#目的
- Vue.js+Typescriptを始めたい人が環境構築で躓かないように
- 自分のための備忘録

#環境
- OS：Windows
- エディタ：Visual Studio Code
- パッケージ管理：Node.js

※実際に環境を構築する上では「Yarn」でも「Atom」でも「Mac」でもいいです
　この記事を読んでいる方は適宜コマンド等を自身の環境に置き換えて読んでください

#対象
- Vue.jsを使う開発環境をとにかく簡単に整えたいと思っている人
- その際にTypescriptを使用したいと思っている人
- [公式ドキュメント](https://cli.vuejs.org/)を読むことが面倒な人
- Node.js/VSCode(またはそれ相当のもの)はインストール済み

#やること
1. [vue-cliをインストール](#vue-cliをインストール)
2. [プロジェクトを作成](#プロジェクトを作成)
3. [ビルド・動作確認](#ビルド・動作確認)

#vue-cliをインストール
VSCode上でコマンドパレットを表示(Ctrl+@)して下記を入力⇒Enter

```cmd:cmd
npm install -g @vue/cli
```

#プロジェクトを作成

1. 下記を入力⇒Enter

    ```cmd:cmd
    vue create <プロジェクト名>
    ```

2. 今回はTypescriptを使用するので「Manually select features」を選択⇒Enter
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268011/020f6be0-0236-fbd3-16c1-e84558dbbd2c.png)

3. 今回はTypesctriptを使用するので「Typescript」にチェックを入れる⇒Enter
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268011/315ab77d-4777-e598-6268-6c714fb9b336.png)
以下は試してないけど、たぶんこんな感じ
    - Progressive Web App (PWA) Support: PWAページを作るならチェック [(wiki)](https://en.wikipedia.org/wiki/Progressive_web_applications)
    - Router: シングルページアプリケーションにするならチェック [(公式)](https://jp.vuejs.org/v2/guide/routing.html)
    - Vuex: 規模の大きいアプリなど状態管理をする必要があればチェック [(公式)](https://jp.vuejs.org/v2/guide/state-management.html)
    - CSS Pre-Processors: SASS/SCSSを使うならチェック
    - Unit Testing: 単体テストを実装するならチェック[(公式)](https://jp.vuejs.org/v2/guide/unit-testing.html)
    - E2E Testing: E2E(End to End)テストを行うならチェック

4. 「y」⇒Enter
![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268011/b9ab3aaa-e5f1-6819-050d-c3a3b4b992f4.png)
参考にさせていただいた下記記事に選択による違いが記載されています
[Vue CLI 3.0 で TypeScript な Vue.js プロジェクトをつくってみる - Qiita](https://qiita.com/nunulk/items/7e20d6741637c3416dcd)

5. 「y」⇒Enter
![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268011/6ee96274-7afd-b59b-cdc4-10c1da36159c.png)
Babel記法の部分にTypescriptを使用するか(？)

6. TSLintを選択⇒Enter
![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268011/c6aca22f-f291-9b28-e3d7-7009ab475f6e.png)
ここは自身のプロジェクトに合わせて選択

7. 好みに合わせて選択⇒Enter
![6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268011/126f085d-5754-8c01-0dac-8b41a1881f82.png)
Lintチェックを実行するタイミング
    - Lint on save: 保存時
    - Lint and fix on commit: コミット時(修正も実行)

8. 好きな方を選択⇒Enter
![7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268011/5785d04f-970b-a0c5-a995-62116e0030c6.png)
Bable等の設定をどこに記述するか
    - In dedicated config files: それぞれ別の専用ファイルを作成
    - In Package.json: package.jsonファイルに合わせて記述

9. 好きな方を入力⇒Enter
![8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268011/bb591ec7-2c95-4db4-7bc0-b4bfee6c920c.png)
次回以降に今回の設定をプリセットとして保存するかどうか

#ビルド・動作確認
[プロジェクトを作成](#プロジェクトを作成)の続きの場合はプロジェクトフォルダへ移動するために下記コマンドを実行

```cmd:cmd
cd <プロジェクト名>
```

- ローカルサーバを立てて実装しながら動作確認する場合

```cmd:cmd
npm run serve
```
表示されるURLへブラウザからアクセス
　ex) http://localhost:8080/
ソースコードを修正⇒保存するたびにブラウザ上の表示へ反映される

- ビルドを実行する場合

```cmd:cmd
npm run build
```

※ビルド時にソースマップファイルが不要な場合は、プロジェクトのルートフォルダに「vue.config.js」ファイルを作成して下記のように記述 [(参考:公式サイト)](https://cli.vuejs.org/config/#productionsourcemap)

```javascript:vue.config.js
module.exports = {
    productionSourceMap: false,
};
```

#最後に
環境構築のためにやることだけをまとめました
これだけ読んでも「なぜこうなっているのか」などを理解することはできないので、疑問がある方は[公式ドキュメント](https://cli.vuejs.org/)を眺めてみることをお勧めします
間違い等があればコメント欄にてご指摘ください

#参考
[公式ドキュメント: Vue CLI](https://cli.vuejs.org/)
[Vue CLI 3.0 で TypeScript な Vue.js プロジェクトをつくってみる - Qiita](https://qiita.com/nunulk/items/7e20d6741637c3416dcd)