vue-cli (vuex) で PlantUML エディターを作ってみた

  • 7
    いいね
  • 0
    コメント

背景 (目的)

成果物

リポジトリ

https://github.com/kkeisuke/plantuml-editor

GitHub Pages

PlantUML Editor - PlantUML online demo client -

PlantUML Editor
2017/08/09 キャプチャ差し替えました。

要求/要件定義

【2017/08/09】追記
はてなブログにまとめています。
http://kkeisuke.hatenablog.com/entry/2017/08/07/160845

モジュール

vue-cli 関連以外のモジュールは以下のとおりです。

Vue に関係ないところはすべて上記で補えたので、Vue の学習に専念できました。
vue2-ace はとてもシンプルで、既存ライブラリを Vue の Component としてラップする場合の参考にもなりました。(いつかもう少し拡張したものを自作したい。)

【2017/04/13】追記
vue2-ace と Vuex の同期が難しかったので、brace を使って Component を作り直しました。

感想

  • webpack に慣れるのに時間が掛かりました。bootstrap が jquery に依存しており、スコープ解決が出来ない。。散々悩んで、以下のように逃げました。答えだけ見ると、単純なことなんですけど。。。
window.$ = window.jQuery = require('jquery')
  • Vue と Vuex についてほぼハマるところはありませんでした(Angular1.x 系の経験あり)。ただ、Component から Store に直接 commit できちゃうのがちょっと気になりました。
  • GitHub Pages 用に config/index.js を少し編集してプロダクション用のビルド先を docs に変えています。

参考

Vue

PlantUML

Todo