序文
コンポーネントを開発するたびに、会社のwikiにアクセスして、関連するAPI記述ドキュメントを作成します。開発期間が経過すると、プレーンテキストのコンポーネントドキュメントに我慢できなくなります。2つの機能が追加された場合、私は公式Webサイトのようなインタラクティブなドキュメントを切望していますelement-ui：ant design
1.ナゲットのmarkdownオンライン編集機能
2.実際の信頼できるコンポーネントは、ソースコードを使用します（少なくともant design、実際のソースコードではなく、ドキュメントのコンポーネントビューコード、巨大なピット）
開く
ステップ1：ドキュメント形式を決定する
類推、、、element-ui各コンポーネントには複数のディスプレイモジュールがあり、図に示すように、ant design各モジュールは、、文本で構成されます。可交互的组件渲染结果该组件的源码
ここでは、レイアウトデザインを直接コピーしました。
ステップ2：テキスト部分はmarkdownオンライン編集として実現する必要があります
プロセスの詳細についてはここでは説明しません。とにかく、少し考えました。233333333
まず、markdownエディターを実装する必要はありません。直接v-md-editorを使用します。以下は疑似コードです。
<div class="component_mark">
<div>
<EditorMarkDown :markDownName="markDownName" @change="$emit('change')" />
</div>
<section class="compoent_mark_body" v-if="markType === 'module'">
<div class="tool_bar">
<div class="tool_bar_item">
<a-tooltip title="复制代码" arrow-point-at-center>
<span class="copy_code tool_icon" @click="copyBtn"> <CopyFilled /></span>
</a-tooltip>
</div>
<div class="tool_bar_item">
<a-tooltip title="查看代码" arrow-point-at-center>
<span class="show_code tool_icon" @click="showCodeBtn"><LeftOutlined /><RightOutlined /></span>
</a-tooltip>
</div>
</div>
<div class="show_component">
<slot></slot>
</div>
<div class="code_body" ref="showCodeRef">
<v-md-preview ref="previewRef" :text="codeVal"></v-md-preview>
</div>
</section>
</div>
复制代码最終的な成果は次のとおりです
ステップ3：データを永続化する方法
自発的な自己研究プロジェクトとして、会社のバックエンドのクラスメートは当然私をサポートしません。自分でバックエンドを作成しても、データベースはもちろん、会社のサーバーに接続する権限もありません。nodejsしたがって、ローカルファイルストレージと組み合わせることで最終的に完成します。私はそれを使用しているのでvue cli、プロジェクト内にサービスを追加しますexpress（使用できるので、なぜ使用しないnuxtのか私に聞かないでください。ただし、必須ではありません...）。vueサービスを開始するときは、一緒expressに開始してください。コードの一部は次のとおりです。
"scripts": {
"serve": "concurrently \"node src/server/start.js\" \"vue-cli-service serve\""
}
复制代码この保存方法の利点の1つは、以前は予想していなかったことです。つまり、ドキュメントのコンテンツがブランチをたどることができgit、異なるブランチのストレージファイルが異なるため、コンポーネントドキュメントを適切に制御してブランチをたどることができます。コンポーネントライブラリバージョンの。
ステップ4：ローカル開発モードとオンラインモードを区別する
主にローカル開発モードでのみ編集できますmarkdwon。パッケージの起動後は、正式な環境で編集機能を提供することはできません。
そのため、ローカル開発モードでのみ開きますexpress。正式な環境では、ドキュメント情報はパッケージ化中に生成されたオフラインファイルから読み取られます。
一般的な原則は、
ローカル開発モードでは次のとおりです。1.保存されmarkdwonたデータがリアルタイムで読み取られます。2。コンポーネントのソースコードがリアルタイムで読み取られます。
パッケージ化の場合：最初に上記の2つのオフラインファイルを生成し、次にそれらをパッケージ化します。
正式な環境：上記の2つのオフラインファイルを読む
ステップ5：開発者がドキュメント編集にもっと集中できるようにする方法
まだまだ細かいところはたくさんありますが、上記の点から、文書を書くのは簡単ではないと思うかもしれませんし、自動化しないとかなり手間がかかります。したがって、私はシステムで多くの自動化を行っているので、必要なのは、コンポーネントのインポート、ルーティングの構成、およびドキュメントのオンライン編集だけです。
これはオンラインデモアドレスです（オンライン編集はオンラインではサポートされておらず、ローカル開発モードで実行している場合にのみ編集ボタンがあります）
クリックしてくださいクリックしてくださいクリックしてください（左上隅の「このドキュメントを維持したいので、録画したデモビデオを見ることができます」をクリックしてください）
短所：クロスフレームワークをサポートできません。たとえば、システムはvue3で記述されているため、reactでカプセル化されたコンポーネントを解析できません。
この問題に関しては、クロスフレームワークをサポートするフレームワークがいくつかあると言われています。この興味のある友人はそれを研究することができます。コミュニティは最近あまりにも多くの仕事をしています...。