# Vue CLIのプロジェクト管理用のGUI機能から環境を構築する

URL: https://webrandum.net/vue-cli-gui/
公開日: 2020-08-16
更新日: 2020-08-16
カテゴリー: コーディング
タグ: Vue CLI, Vue.js
出典: Webrandum（著者: サイトウ マサカズ）

Vue CLを使えば、かなり簡単にVue.jsに必要なパッケージを全て揃えた開発環境を構築できます。

[Vue CLIでVue.jsの開発環境をセットアップするまでの流れ](https://webrandum.net/vue-cli)

これだけでかなり便利なのですが、さらにVue CLIは「CLI」と付いていながらプロジェクト管理用のGUIも用意されています。

今回はこのVue CLIのGUI機能についてまとめておきます。

## 前提

前提として、Vue CLIがグローバルインストールされてある必要があります。

npmの場合は下記コマンドでインストールできます。

```
$ npm install -g @vue/cli
```

Yarnの場合は下記コマンドでインストールできます。

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

## GUI機能の使い方

GUI機能を使うためにはターミナルで下記のコマンドを実行します。

```
$ vue ui
```

実行すると自動的にブラウザで下記ページが開きます。

このページでプロジェクトの管理ができます。

![プロジェクトマネージャ画面](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_1-9-1024x497.png)

プロジェクトの新規作成がしたい場合はメニュー真ん中の「作成」をクリックします。

どの階層にプロジェクトを作成するのか選択して、画面下の「ここに新しいプロジェクトを作成する」をクリックすれば作成開始です。

![新しいプロジェクトの作成](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_2-9-1024x563.png)

まずはプロジェクトの詳細情報の入力からです。

「プロジェクトフォルダの名前入力」「使用するパッケージマネージャの選択」「その他追加オプションの設定」などをして、済んだら「次へ」をクリックします。

![プロジェクトの基本情報](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_3-8-1024x666.png)

次はプリセットの選択画面です。

あらかじめ用意されているプリセットや、自分で追加したプリセットを選べばすぐにプロジェクトの作成ができますが、今回は「手動」を選択して自分で設定していきます。

選択したら「プロジェクトを作成する」をクリックします。

![プリセットの選択](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_4-4-1024x560.png)

次は必要となる機能を選択していきます。

機能を見ながら、右側のチェックを付けていくだけですし、分からない部分は「詳細情報」をクリックすれば細かい情報も見れるのでかなり親切な作りになっています。

![機能の追加](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_5-4-1024x560.png)

最後に先ほど選んだ機能に対しての設定をしていきます。

![選んだ機能に合わせて設定](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_6-3-1024x560.png)

すべての設定ができたら「プロジェクトを作成する」をクリックすると、プロジェクトの作成が始まり、必要なパッケージがインストールされます。

![「プロジェクトを作成中...」](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_7-1024x560.png)

インストールが完了すると自動でダッシュボードへ移動されます。

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

インストールが終わると、プロジェクト ダッシュボードへ移動されます。

ここでプロジェクトに関するプラグインやタスクの設定がGUIで簡単にできます。

![ダッシュボード](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_8-1024x560.png)

例えば左のサイドバーから「プラグイン」を選ぶと、現在インストールされているプラグインが並びます。

ナビゲーションにある「Vue Router を追加」「Vuex を追加」「プラグインを追加する」から簡単にプラグインの追加ができます。

![プラグインの管理](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_9-1024x560.png)

こんな感じでプラグインの一覧が出てきて、追加も簡単にできるのはターミナルに慣れていない人からするとありがたいですし、わざわざインストールコマンドを調べずに追加できるのはメリットですね。

### ウェブページの開き方

実際のウェブページを開きたい場合は、サイドバーの「タスク」へ移動して、「serve」タスクを実行します。

実行の仕方は緑色の「タスクを実行」ボタンをクリックするだけです。

あとは「アプリを開く」ボタンを押せば、ブラウザでウェブページが開きます。

![タスクの実行](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_11-1024x560.png)

タスクを停止したい場合は「タスクの停止」で停止できます。

## まとめ

このように、最初の`vue ui`コマンドさえ実行できれば、ターミナルを一切触らなくても開発環境の構築ができてしまいます。

パッケージの追加もしやすいので、ターミナルに慣れていない人はこちらを使うのも全然ありです。

ただターミナルで構築した方が、ほとんどの作業をキーボードだけで完結できるメリットがあります。

ある程度慣れている人やプリセットから選べばOKな人は今まで通りターミナルでやった方が良さそうです。