背景 (目的)

成果物

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