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

背景 (目的)

• vue-cli を調べてみて、是非使ってみたかった。
• 昨今の状態管理ライブラリやフレームワークには敷居が高いイメージがあった。Vuex は簡単そう。
  • https://www.slideshare.net/dena_tech/vuejs-denatechcon-72603570
• 仕事で UML を書く際に、ローカルで PlantUML サーバー起動させたり、Graphviz をインストールするのが嫌だった。(heroku で PlantUML サーバーを立てた件は別途まとめます。2017/05/27 記事公開しました。)
• http://sujoyu.github.io/plantuml-previewer これを利用させて貰っていたのですが、svg が欲しくなったため。

成果物

PlantUML Editor - PlantUML online demo client -

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

要求/要件定義

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

モジュール

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

• bootstrap
• plantuml-encoder
• vue2-ace
• brace

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

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

感想

• webpack に慣れるのに時間が掛かりました。bootstrap が jquery に依存しており、スコープ解決が出来ない。
  • bootstrap 4 のドキュメントを参考に以前よりスマートに解決できました。（2017/11/18 追記）

main.js

// App.vue でも可
import 'bootstrap'

build/webpack.base.conf.js

plugins: [
  ...
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    'window.jQuery': 'jquery',
    'window.$': 'jquery'
  })
  ...
]

• Vue と Vuex についてほぼハマるところはありませんでした(Angular1.x 系の経験あり)。ただ、Component から Store に直接 commit できちゃうのがちょっと気になりました。
• GitHub Pages 用に config/index.js を少し編集してプロダクション用のビルド先を docs に変えています。
  • 2017/10/01 時点では Netlify で運用中

参考

Vue

• Vue のライフサイクル
• Vuex の概念
• Vue/Vuex のサンプルコード
• vue-devtools
  • AngularJS Batarang を常用しているので、同じように使えて便利でした。

PlantUML

• PlantUML Cheat Sheet

Todo

• 履歴管理
  • ~~IndexedDB Dexie.js~~~ 完了 2017/04/13
• electron-vue
• テンプレート選択 完了 2017/07/14
  • この記事を参考にしてます。