Vueの人気が高まっています。HTMLとJavaScriptが分かれるので、分業しやすいのも利点でしょう。しかし、それでもプログラマーでないと最適な構造で画面を作っていくのは簡単ではありません。 そこで使ってみたいのがOverVueです。画像を元にして画面を設計できるソフトウェアです。

OverVueの使い方

立ち上げました。まず画像を読み込みます。

画像が表示されている状態で、左からコンポーネントを追加していきます。

divやボタンなどを追加します。コンポーネントは枠を使って表示位置を指定できます。

OverVueを使うことで画像からWebコンポーネントとしてVueの構造を書き出すのが簡単になります。各コンポーネントの親子関係も可視化されます。簡易的なコード生成機能もついています。

OverVueはVue製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

OverVue TeamOverVue/OverVue: Prototyping Tool For Vue Devs 适用于Vue的原型工具