JavaScript
開発環境
cli
Vue.js
フロントエンド

Vue CLI UIが想像以上に便利だった話


概要

最近、vue-cliがバージョンアップしていて、ふーんとか思いながら流してたんですが、vue-cli uiという機能があることを教えてもらい改めて調べて動かしたら結構感動してしまったので、記事にしてみました。cli-uiどうなん?って思った方のお役に立てていただければと思います。


プロジェクトを始める


いつものCLI

とりあえずcliをグローバルインストール!!

npm install -g @vue/cli

以下コマンドで、バージョンが3.0以上になっているのを確認しましょう。

vue --version

以下、コマンドでvueのプロジェクトを始めましょう

vue create [project-name]

ここから、設定やらエコシステムやら選んでいきます。

スクリーンショット 2018-06-22 18.10.37.png

ここまでは、普通の便利なCLIですね。この後はいつものエディタでいつも通り開発していきます。スクリーンショット 2018-06-22 18.11.58.png


CLI UI

ここからがGUIでvueのプロジェクトを作っていきます。

以下のコマンドをうってみてください。

vue ui

そうすると、ブラウザでなにやら画面が出て来ますね!

スクリーンショット 2018-06-22 18.17.03.png

これが、vue-cliのui環境です!

ここから、プロジェクトを作成していきます。

プロジェクト名やディレクトリなどを設定していきます。

スクリーンショット 2018-06-22 18.17.53.png

BabelとかPWAとか Vuexとかの設定もポチポチするだけで、簡単に構築できます。

(めちゃくちゃ便利ですね)

スクリーンショット 2018-06-22 18.19.48.png

ESLint周りの設定も簡単です!

スクリーンショット 2018-06-22 18.20.34.png

色々設定したら後はプロジェクトの構築ですね!

ここは少し時間を要します。(ワクワクしますね)

スクリーンショット 2018-06-22 18.20.50.png

プラグインの管理や追加もコードに手を出すことなく出来るようになってます!(涙目)

スクリーンショット 2018-06-22 18.35.20.png

さてさて、ここからアプリを動かしていくわけですが、どうやって動かすのか、、、

もちろんいつも通りターミナルでコマンド打っても起動するのですが、cli-uiでは以下のように、serve やbuildと言った項目から「タスクの実行」ボタンを押すだけで、アプリが簡単に起動します。便利というかここまで再現したか!という感じですね。

スクリーンショット 2018-06-23 18.12.17.png

ここまで、vue-cliの新しい機能について説明しました。vueの人気さと共に便利ツールがどんどん生まれてきて、vueの活用の幅が広がってきますし初学者がたくさん増えるといいなと思いました。