本記事では、vue uiで環境をつくるところだけを載せたいと思います。

vue.jsは、みなさん使ったことあるでしょうか。最近、Reactのスター数を抜いたとか抜いてないとかで話題に上がっていました。

vue.jsは、モダンな最近のフロントエンド開発でよく使われるフレームワークなんですが、このフレームワーク自体のイケてるところが数個あります。
一番大きいのは、日本語がすごく丁寧に作られていること。その他に、コミュニティが活発であることなど技術面以外の点でもすごくいいと思います。

ただ、プログラミングの初心者からすれば最近のフロントエンドの流れは早く追いかけるのに必死だと思います。しかも、そのフレームワークやライブラリを使うには様々な周辺の知識が必要になってくるときもあります。
webpackやgulp、babelなど用語だけで頭が痛くなることもあると思います。
そんななか、Reactに関してはcreate-react-appというcliで環境を構築して開発にすぐに入れる環境を提供してくれるコマンドラインツールが存在し、vueにもvue-cliというものがあります。

しかし、どうにもコマンドラインの操作には慣れないとかいろいろやりたいことが増えた時に管理するのがめんどくさくなってきたりします。
そこで、今回僕が推したいのは「vue ui」です。

vue uiは、GUIで様々な設定などをおこなってくれてサーバーの立ち上げなどもしてくれます。

インストール

まずは、vue-cliをインストールしましょう。

$ npm install -g @vue/cli

すでにvue-cliがインストールされている場合は、バージョンが3以上になっているか確認してください。

起動してみる

インストールができたら、実際にvue uiを使っていきます。

$ vue ui

このコマンドを実行するとlocalhostにダッシュボードが展開されます。

ここで作成を選び、「ここに新しいプロジェクトを作成する」というボタンを押します。すると、アプリケーション名やパッケージマネージャーの設定、gitの設定などを行います。

設定を終えると次は、プリセットの設定をします。特になければデフォルトで良いと思います。

ここまで設定すると、あとは自動でプロジェクトを作ってくれます。作成中の画面は、このようになっていてターミナルではインストールなどが行われていきます。

完了すると、また操作できる画面になるので「タスク-> serve」を押してみましょう。

たったこれだけで、アプリケーションが立ち上がります。マヂツヨ。。
立ち上がったアプリケーションをみてみます。

ここまでで、最初のコマンド以外一度もターミナルに戻らなくてできました。凄まじいですね...

このvue uiは他にもlintを実行したりプラグインを追加できたりモード別（development、productionなど）でビルドを行ったりできます。
その他にも、依存関係を表した表や速度統計などもついてます。

どのモジュールの容量が多いかなどを確認できるアナライザーもついています！

vue半端ないって。vueのプロジェクト一瞬でつくれるもん。そんなん出来ひんやん普通。そんなんできる？と声が聞こえてきそうですが、出来ます。
しかも、ちょっとこのGUI夜使うには明るいなぁと思う人もいるかも知れません！（いない）
そんな人のためのダークモードまで用意されています。僕は正直ここに一番感動しました。。

かっこよすぎひんか...

vueに関しては、ここまで作り込まれた便利なツールがあるので是非みなさんもvue使ってなにか作品をつくってみてはいかかでしょうか！！

Twitter: @konojunya