uml
plantuml
Vue.js
Vuex

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

More than 1 year has passed since last update.


背景 (目的)


成果物

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

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 に依存しており、スコープ解決が出来ない。



    • 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


PlantUML


Todo