Vue CLI UIでお手軽にVueプロジェクトを作成・管理しよう

# はじめに
2018年にVue CLI3がリリースされましたが、その際にGUIでのプロジェクト作成ツールが新規に組み込まれました。
そちらのツールの使い方を簡単に記載します。

【公式サイト】
[Vue CLI 3](https://cli.vuejs.org/)

※Vue CLI3の概要は2018年のVue Fes JapanでVue CLIの製作者が発表したので、そちらの資料を御覧ください。
[Vue CLI 3 and its Graphical User Interface (Guillaume Chau)](https://slides.com/akryum/vue-cli-18-3-jp#/)

# Getting Started
まずはVue CLIをインストールしましょう。
バージョン2以前のパッケージ名は「vue-cli」でしたが、バージョン3からは「**@vue/cli**」となったので、古いバージョンから切り替える人は注意しましょう。

```bash
$ npm install -g @vue/cli
# もしくは
$ yarn global add @vue/cli
```

インストール後以下のコマンドを打つと、ブラウザ上でプロジェクトマネージャが立ち上がります。

```bash
$ vue ui
```

<img width="920" alt="スクリーンショット 2019-03-21 11.56.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/c993f670-6d01-775c-b200-986528ffa7f0.png">

新規に作成する場合は、作成タブを、既存Vueプロジェクトを追加する場合は、インポートタブを選択してください。


```bash
# ちなみにこれまで通りCLIでプロジェクト作成する場合は
$ vue create my-project
```

# プロジェクト作成

### 初期設定

作成タブからプロジェクト新規作成を選択すると、プロジェクトの設定画面に移ります。
プロジェクトの名前設定、Gitリポジトリの初期化設定から、パッケージマネージャの選択も可能です。
<img width="920" alt="スクリーンショット 2019-03-21 12.01.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/d8ee8220-76bb-dc14-2b23-bd81dd433c1a.png">
<img width="418" alt="スクリーンショット 2019-03-21 12.06.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/d78ac775-eaf2-6079-2c02-bfe9a6d38ea6.png">


### プリセット

初期設定を行った後は、プリセット選択に移ります。

デフォルトプリセットはBabelとESLintになります。gitリポジトリからプリセットを読み込むことも可能なようです。
<img width="920" alt="プリセット画面.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/58e5808d-465f-c377-a09b-996e227b5f41.png">


手動でプリセットを選択することもできます。
先程のBabel、ESLintに加え、TypeScriptやPWAサポート、Vuex、テストフレームワークも選択することができます。
選択したプリセットはプロジェクト作成時に自動でインストール・設定されます。
<img width="920" alt="プリセット詳細1-1.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/e1b11c64-612f-4502-adc7-90ffa405e797.png">
<img width="920" alt="プリセット詳細1-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/d92f86b4-f656-d3ec-27e1-1bec0ef87778.png">


設定タブで選択したプリセットに応じた詳細な設定を行います。
一通り設定が完了したら、右下の「プロジェクトを作成する」ボタンを押しましょう！
<img width="920" alt="設定タブ.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/38c491df-f99f-ad79-23c6-c7c71b16a879.png">

プロジェクト保存時に設定したプリセットを保存しておくことができます。
自分の決まった設定がある場合は、1度保存しておけば毎回設定しなくて済むので便利ですね！
<img width="920" alt="プロジェクト保存.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/3426cebc-55f3-40e0-450b-48016649e868.png">

# プロジェクトダッシュボード

プロジェクトが作成し終わるとプロジェクトのダッシュボード画面が表示されます。
<img width="920" alt="プロジェクトダッシュボード.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/4a575499-17be-c7d1-6358-de1125afddf8.png">


こちらのダッシュボードは右上の「カスタマイズ」ボタンからウィジェットを追加することができます。
<img width="920" alt="ウィジェット.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/7557055d-b77a-5cc0-fe7a-e1ac3bea0477.png">


いくつかウィジェットを追加してみました。
package.jsonに記載してあるタスクを実行できたり、ポートを終了することができます。
「脆弱性チェック」と「依存関係の更新」は今後機能が追加されるようですね。
<img width="920" alt="ダッシュボードカスタマイズ.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/2ba2521d-b697-b5bc-1a5f-65e55445b845.png">


あと面白いのは、このダッシュボードでRSSも読めるようになってます。
<img width="920" alt="RSS設定.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/76700be7-baf5-c890-7ad4-a715a9b24bf5.png">


左のメニューからは、Vueプラグインを管理できたり
<img width="920" alt="プラグイン.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/1fa84545-0873-bb8c-f713-5b2d5b758b78.png">


依存パッケージをどうにかこうにかできたり
<img width="920" alt="依存パッケージ.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/22b5bbd4-e8a5-8311-05a5-47f648c8e940.png">


プロジェクトの設定があったり
<img width="920" alt="プロジェクト設定.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/198cdc24-7643-b10b-9b20-6c5c158883fb.png">


プロジェクトタスクを実行したりできます。
<img width="920" alt="プロジェクトタスク.png" src="https://qiita-image-store.s3.amazonaws.com/0/194498/a90aa75c-d430-a937-8b5c-6a9caf439935.png">


# 最後に

Vueプロジェクトをこれから新規に作成する方はぜひ`$ vue ui`コマンドで快適にプロジェクト管理しましょう！！