クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Vue.js】Vue CLIのダッシュボード(GUIツール)を開く

Vue CLIの続きです。前回はVue CLIのプロジェクトを作ってみました。今回はプロジェクトのダッシュボード(GUIツール)を開いてみます。それではいきましょう!

【目次】

前回の記事

※参考:【Vue.js】Vue CLIのプロトタイプとプロジェクトを作る - クモのようにコツコツと

プロジェクトを実行(前回のおさらい)

前回、プロジェクトをいったん閉じていたため、もう一回プロジェクトを実行する。ターミナルを開く。

まず、プロジェクトに移動(プロジェクト名はhajimete_project)

$ cd hajimete_project

次にプロジェクトを実行

$ npm run serve

しばらく処理が続いたあと完了する。

ローカルホストで開くと…

http://localhost:8080/

はい、前回の状態になりました♪ f:id:idr_zz:20191015070302j:plain

プロジェクトをビルドする

ファイル構成を見てみる。ファインダーで「hajimete_project」で検索。

f:id:idr_zz:20191018063912j:plain

ファイルがいっぱいある。「public」フォルダの中に見受けられる「index.html」を開いてみたがまだ中身は真っ白…。

前回同様、書籍「Vue.js & Next.js 超入門」を参考にしながら進める。

※参考:https://www.amazon.co.jp/Vue-js-Nuxt-js超入門-掌田津耶乃/dp/4798056596

まず、プロジェクトをビルドする。下記のコマンド

$ npm run build

しばらく処理が続き完了すると…

「dist」というフォルダが増える。 f:id:idr_zz:20191018063915j:plain

このビルドされたファイル一式をサーバ上にあげるとVue.jsのアプリが公開されるとのこと!(しかし現時点では「index.html」を開いてもまら真っ白…)

GUIツールを開く

プロジェクトマネージャ

Vue CUIのGUIツール(ダッシュボード)があるようなので、開いてみる。

下記のコマンド

$ vue ui

しばらく処理が続いて完了すると…

ブラウザが開いてプロジェクトマネージャが表示される! f:id:idr_zz:20191018063917j:plain ヘッダーメニューの2番目「作成」を押すと…

プロジェクト作成

プロジェクト作成画面が開いた! f:id:idr_zz:20191018063922j:plain 「新しいプロジェクトを作成する」を押してみる

プロジェクト作成画面 f:id:idr_zz:20191018063926j:plain

名前はテケトーに。初めてのプロジェクトということで「hajipuro」としてみるかw f:id:idr_zz:20191018063929j:plain 「次へ」を押す。

プリセットを選択。今回はデフォルトのままで。 f:id:idr_zz:20191018063934j:plain 「プロジェクトを作成する」を押すと…

やた!ダッシュボードが開いた! f:id:idr_zz:20191018063938j:plain

インポート

ちなみに3つ目のメニュー「インポート」 f:id:idr_zz:20191018072237j:plain ここからは既存のプロジェクトをインポートできるようだ。

ダッシュボード

ダッシュボード画面に戻る。 f:id:idr_zz:20191018063938j:plain WordPressのダッシュボードと似た雰囲気。

プラグイン

左メニューの上から見ていこう。まずはプラグイン。 f:id:idr_zz:20191018063944j:plain プロジェクトにインストールされているプラグインたち。babelとかが入っている。ここから追加もできそう。

プロジェクト依存

次はプロジェクト依存。 f:id:idr_zz:20191018063948j:plain 依存ってなに?調べてみた。

「依存関係」とは、他のコンポーネントがないとそのプロジェクトを正しくビルドおよびデプロイできない状況です

※参考:プロジェクト依存関係の管理

なるほど。Vue、babel、ES-lintなどと依存関係にあると。

プロジェクト設定

次、プロジェクト設定。 f:id:idr_zz:20191018063953j:plain 下層メニュー、Vue CLIとES Lintがある。

Vue CLIを開く。一般的な設定。 f:id:idr_zz:20191018064004j:plain

その下にCSSの設定。 f:id:idr_zz:20191018064009j:plain

ES Lintの設定 f:id:idr_zz:20191018064015j:plain

プロジェクトタスク

次、プロジェクトタスクを見てみる。 f:id:idr_zz:20191018063959j:plain これもいくつか下層メニューがある。

Serve画面 f:id:idr_zz:20191018064020j:plain

Bild画面 f:id:idr_zz:20191018064026j:plain

Lint画面 f:id:idr_zz:20191018064031j:plain

Inspect画面 f:id:idr_zz:20191018064035j:plain

最後に

ということでVueプロジェクトの(GUI)ダッシュボード画面をざっと見ていきました!

書籍ではこのあとプロジェクトではなくゼロからフルスクラッチでコードを書いていきます。内容的にはこれまでCodePenでCDNリンクでやってきたことと近い感じ。

大規模開発はVueプロジェクト、小規模開発はフルスクラッチという使い分けのようです。

次回はまたNuxt.jsの続きをやってみようかと思ってます。たぶんVue CLIを見たことで少し理解がしやすいんじゃないかと予想してます。それではまた!


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com