Vue のコンポーネントを
ゆるふわに作れるようにしたい

まぼろしのJS勉強会 #3

Xcode Storyboard

https://developer.apple.com/jp/xcode/

Android Studio Layout Editor

https://developer.android.com/studio/write/layout-editor.html?hl=ja

Dreamweaver Design View

Vue コンポーネントも
GUI で作りたい

https://github.com/ktsn/vue-designer

Demo

色々やれて楽しい!

  • HTML / JS / CSS のコード解析
  • Vue のレンダリングの再実装
  • 割と難しめのインタラクションの実装

色々考えることあってつらい!

  • 様々なプリプロセッサの対応
  • プレビュー内での computed, method の扱い
  • グローバルなスタイルをどうするか
  • ユーザーごとの設定の違いをどうするか

直近の TODO

  • Viewport の大きさ、ズームレベルの変更
  • スクロールをデザインツールっぽくする
  • margin, padding のガイドを出したい
  • props / data をプレビュー上で編集したい

興味があったらぜひ一緒に作りませんか?

(2018 年中には v1.0.0 出したいなー)

Vue のコンポーネントをゆるふわに作れるようにしたい

By katashin

Vue のコンポーネントをゆるふわに作れるようにしたい

  • 2,840