share facebook facebook twitter menu hatena pocket slack

2018.09.25 TUE

Vue CLIのプロジェクト管理UIがいい感じだった

甲斐 甲

WRITTEN BY 甲斐 甲

概要

Vue-CLI公式のドキュメントを見るとプロジェクト作成・管理UIが用意されているみたいでしたので試してみました。

ダークモード搭載で素敵です。

Creating a Project
https://cli.vuejs.org/guide/creating-a-project.html

手順

> mkdir 任意のディレクトリ
> cd 任意のディレクトリ

Vue-CLIがインストールされていなかったらインストールします。

> npm install --global @vue/cli

では、プロジェクト作成のUIを起動します。
--port 指定することで、ポート変更もできました。

> vue ui
? Starting GUI...
? Ready on http://localhost:8000

はい。

http://localhost:8000 にアクセスしてみます。

> open http://localhost:8000

表示されました。日本語対応されてます!
作成ボタンからプロジェクトを作成してみます。

どのディレクトリに作成するか指定できます。
画面下の「ここに新しいプロジェクトを作成する」ボタンをクリック。

プロジェクト名やパッケージマネージャ(NPM or YARN)などの指定ができます。
コマンドでやるよりわかりやすいですね^^

「手動」を選択すると細かく機能選択できます。

詳細情報のリンクもあってとっつきやすいです。

各種オプション指定。英語だからなぁ。。。という方はGoogle Chromeの「日本語に翻訳」が出番ですよ!

はい。大体わかります。

次回同じ設定でプロジェクト作成できるようにプリセットも保存できます。

プロジェクト作成中。ここはコマンド実行と同じく時間がかかります。

vue ui コマンドを実行したターミナルです。

インストールが完了すると、プロジェクトの管理画面が表示されました。
わっかりやすーい。コマンドで作成したプロジェクトでも確認できるようです。

右上の「プラグインを追加する」ボタンからプラグインのインストールもできます。

細かなプロジェクトの設定もできます。

タスクランナーもブラウザから実行できます。タスクは同時実行もできるようです。
ダッシュボードが素敵です。

コマンド実行の出力も確認できます。

右下に気になるボタンがあったので、クリックしてみたらダークモードにも対応。
素晴らしす^^最高ですね^^

思ってた以上に作り込まれてて使えるツールでした。

参考

Creating a Project
https://cli.vuejs.org/guide/creating-a-project.html

Vue.js+TypeScriptで開発するときの参考記事まとめ

https://cloudpack.media/43084

元記事はこちら

Vue CLIのプロジェクト管理UIがいい感じだった

甲斐 甲

甲斐 甲

2018/7にJOIN。 最近の好みはサーバレスです。なんでもとりあえず試します。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。