【VueによるSPA構築】Vueプロジェクトマネージャの使い方

課題を持った人

Vue CLI 3から使えるようになったVueプロジェクトマネージャが便利だと聞きました。Vueプロジェクトマネージャについて教えてください。ついでに使い方も知りたいな。

筆者

VueプロジェクトマネージャはVueプロジェクトをGUIで扱えるとても便利なアプリケーションです。プラグインやライブラリの管理もラクチンです。CUI(黒い画面)が苦手な方でも気軽に扱うことができます。さらにwebpackの設定も自動で行ってくれますよ。

この記事では、Vueプロジェクトマネージャの起動方法や画面の説明をします。

以下の環境で動作確認しました。

Vueプロジェクトの開発環境が整っていない方は、「Vue CLIを使った開発環境構築方法」で環境構築後に読み進めてください。Vue CLIのインストールの節まで完了していればOKです。

Vueプロジェクトマネージャの起動方法

Vueプロジェクトマネージャの起動方法はとても簡単です。

ターミナルを開いてvue uiコマンドを実行するだけです。

つぎのような画面が表示されれば成功です。画面が異なる場合は左下にあるホームボタンをクリックするとホーム画面に移動するので同じ画面が表示されるはずです。

新しいプロジェクトを作成する

Vueプロジェクトマネージャを使うと、vue createコマンドで行っていたvueアプリケーションの雛形を作る作業をGUI上で行うことができます。

実際にVueプロジェクトを作成しながら学んでいきましょう。

「①作成」→「②ここに新しいプロジェクトを作成する」の順番にクリックして、プロジェクトを作成していきましょう。

Vueプロジェクトに関する設定項目が表示されますので、入力/選択をしていきましょう。

僕は以下の通り入力/選択してプロジェクトを作成しました。

プロジェクトの作成が無事完了するとつぎのような画面が表示されます。※プロジェクトの作成はけっこう時間がかかります。僕の場合は10分くらいかかりました。

この画面でプラグインやライブラリのインストール、ローカルWebサーバの起動、コンパイルなどを行うことができます。

Vueプロジェクトマネージャのメニューについて

画面左に表示されているメニューについて解説していきます。

ダッシュボード

プラグインの更新やニュースフィードなどの情報を表示できます。表示したい情報は画面右上のカスタマイズボタンから追加・削除ができます。上の画面ではニュースフィードを追加してみました。ただ、まだ開発中のようで「available soon」と表示されるものもあります。

プラグイン

インストール済みのプラグインの確認やプラグインの追加が行えます。

依存

インストール済みのライブラリの確認やライブラリのインストールができます。webpackの設定は裏側で自動でやってくれます。

設定

Vueプロジェクト全体に関わる設定をすることができます。例えば、アプリケーションが配置されるベースURLの設定、デプロイ用のデータの出力先の設定などが行えます。

タスク

開発中はタスクメニューをよく使うことになります。タスクメニューにはserve、build、lint、inspectがあります。

serve

開発用のサーバを起動できます。コードを保存すると自動で更新(ホットリロード)されるのが便利です。

build

コンパイルしてデプロイ用のデータの作成ができます。エラー内容も表示されるためデバッグもラクです。

lint

JavaScriptの記述スタイルのチェックや自動修正が行えます。

inspect

隠されていて見ることができないwebpack.config.jsの内容が確認できます。

筆者

VueプロジェクトマネージャができたことでCUIはほとんど使わなくてもよくなりました。ぜひ活用して、VueによるSPA開発を効率的に行っていきましょう！