prefacio
Cada vez que desarrollo un componente, voy a la wiki de la empresa para escribir el documento de descripción de la API correspondiente. Después de un período de desarrollo, realmente no soporto el documento del componente de texto sin formato. Estoy codiciando documentos interactivos como el sitio web oficial, si se les agregan dos funciones element-ui:ant design
markdown1. La función de edición en línea de Nuggets
2. Los componentes reales y confiables usan el código fuente (al menos ant designel código de vista del componente en el documento, no el código fuente real, pozo gigante)
abrir
Paso 1: determinar el formato del documento
Analogía element-ui, ant designcada componente tiene varios módulos de visualización, cada módulo consta 文本de 可交互的组件渲染结果, 该组件的源码como se muestra en la figura
Aquí copié el diseño de diseño directamente.
Paso 2: la parte del texto debe realizarse como markdownedición en línea
Los detalles del proceso no se describirán aquí. De todos modos, tomó un poco de reflexión. 233333333
En primer lugar, el markdowneditor definitivamente no necesita ser implementado por mí. Utilizo directamente v-md-editor . El siguiente es un pseudo código
<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>
复制代码El logro final es el siguiente
Paso 3: cómo conservar los datos
Como un proyecto de auto-investigación espontáneo, los compañeros de clase de back-end de la empresa, naturalmente, no me apoyarán. Incluso si yo mismo escribo el backend, no tengo permiso para conectarme al servidor de la empresa, y mucho menos a la base de datos. Por lo tanto, finalmente se completa nodejscombinándolo con el almacenamiento local de archivos. Ya que lo uso vue cli, y luego agrego un servicio dentro del proyecto express, (no me pregunten por qué no lo uso nuxt, porque puede, pero no es necesario...). Al iniciar el vueservicio, inícienlo juntos express, parte del código es el siguiente
"scripts": {
"serve": "concurrently \"node src/server/start.js\" \"vue-cli-service serve\""
}
复制代码Una ventaja de este método de almacenamiento es que no lo esperaba antes, es decir, el contenido del documento puede seguir gitla rama y los archivos de almacenamiento de diferentes ramas son diferentes, por lo que el documento componente puede controlarse bien para seguir la rama. de la versión de la biblioteca de componentes.
Paso 4: Distinga entre el modo de desarrollo local y el modo en línea
Principalmente solo se puede editar en modo de desarrollo local markdwon. Una vez que se lanza el paquete, es imposible proporcionar funciones de edición en un entorno formal.
Así que solo lo abriré en modo de desarrollo local express. En el entorno formal, la información del documento se lee de los archivos fuera de línea generados durante el empaquetado.
El principio general es que en el
modo de desarrollo local: 1. Los markdwondatos almacenados se leerán en tiempo real 2. El código fuente del componente se leerá en tiempo real
Al empaquetar: primero genere los dos archivos sin conexión anteriores y luego empaquetelos
Entorno formal: lea los dos archivos sin conexión anteriores
Paso 5: Cómo hacer que los desarrolladores se concentren más en la edición de documentos
A pesar de que todavía quedan muchos detalles por fuera, a partir de los puntos presentados anteriormente, podría pensar que no es fácil escribir un documento y, de hecho, es bastante laborioso si no está automatizado . Así que hago mucha automatización en el sistema, por lo que casi todo lo que necesita hacer es importar componentes, configurar el enrutamiento y editar documentos en línea.
Esta es la dirección de demostración en línea (la edición en línea no se admite en línea y habrá un botón de edición solo cuando se ejecute en modo de desarrollo local)
Haga clic en mí, haga clic en mí, haga clic en mí (haga clic en la esquina superior izquierda "Quiero mantener este documento, puede ver el video de demostración que grabé")
Desventajas: No puede soportar cross-framework, por ejemplo, el sistema está escrito en vue3, por lo que los componentes encapsulados con react no pueden ser analizados.
Con respecto a este tema se dice que hay algunos frameworks que soportan cross-framework.Este amigo interesado puede estudiarlo.La comunidad ha estado trabajando demasiado últimamente....