kz’s blog

興味のあることについて書いていきます。

Vue CLI 3 の Vue UI を使って画面を表示させる

バージョン確認

$ node -v
v10.6.0

$ npm -v
6.1.0

インストール

$ npm install -g @vue/cli
  • npm install -g @vue/cli にすることで Vue CLI のバージョン3 以降がインストールされるっぽいですね。

  • npm install -g vue-cli にするとバージョン2 になるみたいです。

vue ui 起動

$ vue ui

起動させるとブラウザが自動的に開き、Vue の管理画面が表示されます。

f:id:kz62:20180814222932p:plain

プロジェクト作成

  • Vue 管理画面 > 作成タブ > ここに新しいプロジェクトを作成する

  • 適当に入力 > 次へ f:id:kz62:20180814223101p:plain

  • よくわからないので「デフォルトプリセット」を選択 > プロジェクトを作成する f:id:kz62:20180814223125p:plain

  • 作成されるまで待ちます。。。

アプリ起動

作成が完了したらアプリを起動できることを確認します。

  • 左側のタスクをクリック > serve > タスクの実行 f:id:kz62:20180814223145p:plain

  • ステータスが成功になったら「アプリを開く」をクリック

  • 下記画面が表示されたらOKです。 f:id:kz62:20180814223208p:plain

所感

Vue UI を使用することでプロジェクトの作成から起動まで簡単に実現することができました。

最低限のコマンドのみ(Vue UI 起動コマンド)を覚えておけば良いので、コマンドラインでの作業が苦手な方にとっては重宝するかと思います。

また、プラグインの管理も GUI で行うことができる点も非常にポイントが高いかと思います。