orimajp / document-manager-mock

document-manager-mock

ドキュメント管理アプリ用モックプロジェクト。

目的

ドキュメントツリーを持つドキュメント表示フロントエンド開発技術調査。

技術要素

• Nuxt.js
• TypeScript
• nuxt-typed-vuex

状況

• Vuex(というかVuexに格納するクラス)にてデータ更新処理を行うよう変更することにより、ツリー表示については狙い通りの動作になりつつある。
• Markdownレンダリングの基本的な動作まで完了。
• 生成されたHTMLの内部リンクがアンカータグになるためリンククリック時のレスポンスが悪い問題は、内部リンクのみrouter.pushするような仕組みを入れて対応。
• ホストを0.0.0.0、ポート番号を3333に変更。開発時はhttp://localhost:3333にアクセスする。
• 表示画面右サイドに目次用ドロワ追加
• メニュー階層変更画面追加
• ページ変更画面追加

実行

1. git clone リポジトリ
2. cd リポジトリディレクトリ
3. npm install
4. npm run dev
5. http://localhost:3333 # ポート番号変更済み

参考

VuexへのTypeScript適用

• NuxtJS + Vuexでいい感じのTypescript環境をあまり頑張らないで構築する - Qiita
• Introduction | 🏦 Nuxt Typed Vuex
• danielroe/nuxt-typed-vuex: 🏦 A typed store accessor for Nuxt.

@nuxtjs/markdownit

• vue-markdown をやめて nuxtjs/markdownit を利用する
• VuejsでMarkdownを使うときの最強な組み合わせ | WatchContents

内部リンク用画面遷移処理の参考になったページ

• https://github.com/nuxt-community/modules/issues/185
• https://github.com/nuxt/nuxtjs.org/blob/master/components/commons/HtmlParser.global.vue
• https://bitto.jp/posts/blog/nuxt%E5%8C%96/nuxt-md-anchor-convert/https://bitto.jp/posts/blog/nuxt%E5%8C%96/nuxt-md-anchor-convert/