Posted at
Vue.jsDay 2

Vueifyの簡単お試しセットを作った

More than 3 years have passed since last update.

vue-cristmas.png

Vue.js Advent Calendar 2015の二日目です。

今回は、Vueifyのお試しに便利なツールを作ってみました。


Vueifyについて

Vueify、使ってますか?

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

Vueifyは便利なのですが、セットアップがなかなかに大変です。

おすすめはvueify-exampleをgit cloneして使うことですが、今回は、もっと手軽にvueifyを体験出来るエディタを作ってみました。


リポジトリ

こちらです。

https://github.com/hashrock/vueify-editor


動作の様子

dWG4Wtvj5Y.gif


インストール

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

git clone https://github.com/hashrock/vueify-editor

cd vueify-editor
npm install
npm start

その後、下記アドレスを開いて下さい。

http://localhost:3000

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


使い方

スクリーンショット_2015-12-02_18_20_37.png

左側の画面は、app.vueという一枚のvueファイルを編集するエディタになっています。

ここにHTMLやCSS, JSを入力すると、数秒してbrowserifyのビルドが実行され、即時に見た目に反映されます。

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


おわりに

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

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

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