Cree la biblioteca de componentes de Vue3 desde 0 (9): VitePress construya e implemente el documento de la biblioteca de componentes

Documentación de la biblioteca de componentes de construcción de VitePress

Cuando se completa nuestra biblioteca de componentes, es esencial un documento de uso detallado. Este artículo presentará cómo usar VitePress para crear rápidamente un sitio de documentación de la biblioteca de componentes e implementarlo en GitHub.

Instalar

Primero cree una nueva carpeta de sitio y ejecútela pnpm init, luego instálela vitepressyvue

pnpm install -D vitepress vue

Una vez completada la instalación, cree un nuevo archivo docs/index.md

# Hello Easyest

scriptsLuego agregue el comando en package.json

"scripts": {
    
    
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },

implementarpnpm run docs:dev

Configuración de la barra de navegación

Cree uno nuevo en el directorio docs/.vitepressconfig.js

export default {
    
    
  themeConfig: {
    
    
    siteTitle: "vitepress",
    nav: [
      {
    
     text: "指南", link: "/guild/installation" },
      {
    
     text: "组件", link: "/components/button/" },
    ],
    socialLinks: [
      {
    
     icon: "github", link: "https://github.com/qddidi/easyest" },
    ],
  },
};

Aquí hemos añadido dos barras de navegación y una dirección de github, reinicia el proyecto y podrás ver que la barra de navegación ha hecho efecto

Pero golpear guías y componentes es 404 porque aún no hemos creado esos directorios y archivos. Entonces necesitamos crear uno nuevo en el directorio docs guild/index.mdy components/button/index.mdhacer clic nuevamente para saltar a la página correspondiente

configuración de la barra lateral

Haz la misma config.jsconfiguración de la barra lateral ensidebar

   sidebar: {
    
    
            "/guild/": [
                {
    
    
                    text: "基础",
                    items: [
                        {
    
    
                            text: "安装",
                            link: "/guild/installation",
                        },
                        {
    
    
                            text: "快速开始",
                            link: "/guild/quickstart",
                        },
                    ],
                },
                {
    
    
                    text: "进阶",
                    items: [
                        {
    
    
                            text: "xx",
                            link: "/xx",
                        },
                    ],
                },
            ],
            "/components/": [
                {
    
    
                    text: "基础组件",
                    items: [
                        {
    
    
                            text: "Button",
                            link: "/components/button",
                        }
                    ],
                }
            ]
        },

Ahora tienes una barra lateral

Importar biblioteca de componentes

Debido a que lo que queremos construir es un sitio de documentación de la biblioteca de componentes, definitivamente es necesario presentar nuestra biblioteca de componentes. Aquí también presentamos la biblioteca de componentes locales, así que pnpm-workspace.yamlagregue un nuevo sitedirectorio en el espacio de trabajo pnpm

packages:
  - "packages/**"
  - "play"
  - "site"

Luego instálelo en el directorio del sitio pnpm add easyest, cree uno nuevo en docs theme/index.jse importe nuestra biblioteca de componentes

import DefaultTheme from "vitepress/theme";
import easyest from "easyest";
export default {
    
    
  ...DefaultTheme,
  enhanceApp: async ({
    
     app }) => {
    
    
    // app is the Vue 3 app instance from `createApp()`. router is VitePress'
    // custom router. `siteData`` is a `ref`` of current site-level metadata.
    app.use(easyest);
  },
};

Regrese a components/button/index.md e intente usar nuestro componente de botón directamente

## Button 按钮

<ea-button>默认按钮</ea-button>

<ea-button type="primary">默认按钮</ea-button>

Se puede comprobar que nuestros componentes han surtido efecto

Al mismo tiempo, también podemos agregar efectos de visualización de código, como cambiar button/index.md a

## Button 按钮

<ea-button>默认按钮</ea-button>
<ea-button type="primary">默认按钮</ea-button>

::: details 显示代码

```html
<ea-button>默认按钮</ea-button> <ea-button type="primary">默认按钮</ea-button>


:::

¿No es muy simple?

Implementar un sitio estático

Una vez que se completa el paquete, puede implementar en su propio servidor o puede optar por implementar en el sitio de github. Aquí se explica cómo implementar en el sitio de github. Primero cree
una nueva organización llamada easyestuiy luego cree un nuevo easyestalmacén bajo la organización
y luego agregue site/docs/.vitepress/dist Enviar a este almacén

Haga clic en configuración para seleccionar la sucursal y el directorio para implementar, aquí está el directorio raíz, guárdelo y,

finalmente, la dirección de nuestro sitio es easyestui.github.io/easyest / Entonces, al empaquetar, site/docs/.vitepress La base de /config.js debe ser/easyest/

export default {
    
    
    base: process.env.NODE_ENV === 'production' ? '/easyest/' : '/',
   ...
}

Después de completar lo anterior, puede visitar nuestro sitio Easyest, el sitio se actualiza en tiempo real, siempre que cambie su almacén, el sitio cambiará

Nota: Si aparece 404 en tu visita, puede ser que tu configuración base esté mal