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

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

Webrandum

Vue CLIでVue.jsの開発環境をセットアップするまでの流れ

https://webrandum.net/vue-cli

今回はVue CLIを使って、Vue.jsの開発環境を作るまでの手順をメモしておきます。Vue CLIはVue.jsの開発環境を作ってくれる公式のコマンドラインツールVue CLIはVue.jsでアプリケーションを構築するときに、必要となるツールを簡単にセットアップしてくれる公式のコマンドラインツールです。これを使うことで、1から自分でインストールして回る必要がなくなり、プロジェクトの作成が簡単にできます。Vue CLIとYarnのグローバルインストールまずは必要となる「Vue CLI」のインストールと「Yarn（インストールしていない人）」をインスト...

これだけでかなり便利なのですが、さらに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

実行すると自動的にブラウザで下記ページが開きます。
このページでプロジェクトの管理ができます。

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

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

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

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

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

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

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

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

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

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

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

インストールが終わると、プロジェクト ダッシュボードへ移動されます。
ここでプロジェクトに関するプラグインやタスクの設定がGUIで簡単にできます。

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

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

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

ウェブページの開き方

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

実行の仕方は緑色の「タスクを実行」ボタンをクリックするだけです。
あとは「アプリを開く」ボタンを押せば、ブラウザでウェブページが開きます。

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

まとめ

このように、最初のvue uiコマンドさえ実行できれば、ターミナルを一切触らなくても開発環境の構築ができてしまいます。
パッケージの追加もしやすいので、ターミナルに慣れていない人はこちらを使うのも全然ありです。

ただターミナルで構築した方が、ほとんどの作業をキーボードだけで完結できるメリットがあります。
ある程度慣れている人やプリセットから選べばOKな人は今まで通りターミナルでやった方が良さそうです。