Vue.js Advent Calendar 2015の二日目です。
今回は、Vueifyのお試しに便利なツールを作ってみました。

Vueifyについて

Vueify、使ってますか？

Vueifyはコンポーネントを定義するのに便利ですが、最近ではホットリローディングに対応し、開発体験の向上にも大きく寄与するものになっています。エディタでゴリゴリvueファイルを書き換えると、ブラウザ上でSPAがリアルタイムに組み上がっていくのは、単純に開発速度が上がりますし、実際感動します。

Vueifyは便利なのですが、セットアップがなかなかに大変です。
おすすめはvueify-exampleをgit cloneして使うことですが、今回は、もっと手軽にvueifyを体験出来るエディタを作ってみました。

リポジトリ

下記のコマンドを実行します（Windowsでは動作しないかもしれません）。

git clone https://github.com/hashrock/vueify-editor
cd vueify-editor
npm install
npm start

その後、下記アドレスを開いて下さい。
http://localhost:3000

※browserifyのビルドに時間がかかるので、ページが空白になっている場合はリロードして下さい。

左側の画面は、app.vueという一枚のvueファイルを編集するエディタになっています。
ここにHTMLやCSS, JSを入力すると、数秒してbrowserifyのビルドが実行され、即時に見た目に反映されます。

（※dataの反映には、ブラウザをリロードする必要があります。vueifyのホットリロードは、dataの内容はリアルタイム反映されない仕様となっています。イニシャライズされてしまうと、逆に面倒という考えからでしょう。）

ファーストプロトタイピング用のエディタとして使えるかもしれません。

複数のvueファイルを構成するときはいずれにしろ、ちゃんと開発環境を整える必要があります。とりあえずお遊び用ですね。

なお、このエディタ自体もVue.jsで作成されています。Codemirrorとの連携が無理やりな感じですが…まあ動くのでいいとしましょう。では、明日のAdvent Calenderもお楽しみに！