Vue CLIのプロジェクト管理UIがいい感じだった

## 概要

Vue-CLI公式のドキュメントを見るとプロジェクト作成・管理UIが用意されているみたいでしたので試してみました。

ダークモード搭載で素敵です。
<img width="1350" alt="スクリーンショット 2018-08-30 16.50.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/caac73c4-841e-2203-eaac-2c59a3760ee4.png">



Creating a Project
https://cli.vuejs.org/guide/creating-a-project.html


## 手順

```sh
> mkdir 任意のディレクトリ
> cd 任意のディレクトリ
```

Vue-CLIがインストールされていなかったらインストールします。

```
> npm install --global @vue/cli
```

では、プロジェクト作成のUIを起動します。
```--port``` 指定することで、ポート変更もできました。

```sh
> vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000
```


はい。

http://localhost:8000 にアクセスしてみます。

```sh
> open http://localhost:8000
```

表示されました。日本語対応されてます！
作成ボタンからプロジェクトを作成してみます。
<img width="1314" alt="スクリーンショット 2018-08-30 16.20.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/85517565-eacd-3baf-bda4-9d8ab4b318b3.png">

どのディレクトリに作成するか指定できます。
画面下の「ここに新しいプロジェクトを作成する」ボタンをクリック。
<img width="1321" alt="スクリーンショット 2018-08-30 16.22.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/2947f03a-31bd-8036-ff5a-618e35d38640.png">
プロジェクト名やパッケージマネージャ(NPM or YARN)などの指定ができます。
コマンドでやるよりわかりやすいですね^^
<img width="1163" alt="スクリーンショット 2018-08-30 16.22.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/e846b423-32b6-813d-40ef-817bed1beacb.png">

「手動」を選択すると細かく機能選択できます。
<img width="1189" alt="スクリーンショット 2018-08-30 16.23.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/cf4f1ac7-8dcd-a051-03a0-1d5eb475b508.png">

詳細情報のリンクもあってとっつきやすいです。
<img width="1197" alt="スクリーンショット 2018-08-30 16.23.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/53a0847b-d4a5-c72f-1df6-4d505e6857d0.png">

各種オプション指定。英語だからなぁ。。。という方はGoogle Chromeの「日本語に翻訳」が出番ですよ！
<img width="1233" alt="スクリーンショット 2018-08-30 16.24.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/46f414d7-badb-eae6-8ea8-e2f33806f838.png">

はい。大体わかります。
<img width="1225" alt="スクリーンショット 2018-08-30 16.24.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/fabee803-b7f7-2ccf-dd1d-3f936549acac.png">

次回同じ設定でプロジェクト作成できるようにプリセットも保存できます。
<img width="1105" alt="スクリーンショット 2018-08-30 16.25.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/7a85ee8f-d94e-899f-1f55-0851f1fd9a79.png">

プロジェクト作成中。ここはコマンド実行と同じく時間がかかります。
<img width="939" alt="スクリーンショット 2018-08-30 16.25.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/519599a9-b22e-db1d-1129-b6e4d4ba5712.png">

```vue ui``` コマンドを実行したターミナルです。
<img width="837" alt="スクリーンショット 2018-08-30 16.25.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/50dad630-df28-c594-d82c-e80176632bab.png">

インストールが完了すると、プロジェクトの管理画面が表示されました。
わっかりやすーい。コマンドで作成したプロジェクトでも確認できるようです。
<img width="1352" alt="スクリーンショット 2018-08-30 16.45.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/eb6a2c56-312b-83ba-0a47-00fde661137e.png">

右上の「プラグインを追加する」ボタンからプラグインのインストールもできます。
<img width="1354" alt="スクリーンショット 2018-08-30 16.46.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/a48467c9-7173-cb8d-fe82-a008cdc3b1e1.png">

<img width="1352" alt="スクリーンショット 2018-08-30 16.46.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/482865e7-e668-a9d0-5696-a334956a8ee6.png">

細かなプロジェクトの設定もできます。
<img width="1348" alt="スクリーンショット 2018-08-30 16.47.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/a5b502ac-beb9-ac5e-2237-e9ae5d74a814.png">

タスクランナーもブラウザから実行できます。タスクは同時実行もできるようです。
ダッシュボードが素敵です。
<img width="1351" alt="スクリーンショット 2018-08-30 16.47.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/5408dd9d-bc60-b3e3-73c9-c1c9e9a0ec2e.png">

コマンド実行の出力も確認できます。
<img width="1353" alt="スクリーンショット 2018-08-30 16.47.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/b9686181-5a1d-96f7-c6c0-460f9b989143.png">

右下に気になるボタンがあったので、クリックしてみたらダークモードにも対応。
素晴らしす^^最高ですね^^
<img width="1350" alt="スクリーンショット_2018-08-30_16_50_27.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/f957ff9d-dcca-8fad-37f5-df8fcd9d0f37.png">

思ってた以上に作り込まれてて使えるツールでした。

## 参考

Creating a Project
https://cli.vuejs.org/guide/creating-a-project.html

Vue.js+TypeScriptで開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7