Cómo crear un sistema de documentación con Vue y VuePress

Introducción

La documentación es una parte fundamental del éxito de un proyecto. Sin embargo, es posible que su proyecto no requiera un sistema de documentación completo. En estas situaciones, las páginas estáticas probablemente sean suficientes.

VuePress analiza los archivos Markdown estructurados en carpetas para convertirlos en archivos HTML que se van a publicar. VuePress se entrega con Vue , Vue Router y webpack . Cada archivo Markdown se analiza como una plantilla Vue y los recursos se agrupan en webpack . Analizar los archivos Markdown en plantillas Vue le permite también utilizar scripts nativos de Vue en forma de componentes de un solo archivo.

Nota: Este tutorial se redactó teniendo en cuenta la instalación manual. create-vuepress-siteTambién está disponible una herramienta de andamiaje automatizada llamada

En este artículo, creará un sitio web de documentación estática que también es una aplicación de una sola página utilizando el generador de sitios estáticos con tecnología Vue, VuePress.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local .

Este tutorial fue verificado con Node v16.6.2, npmv8.1.0 y vuepressv1.8.2.

Paso 1: Configuración del proyecto

En esta sección crearás tu proyecto e instalarás VuePress.

Primero, crea un nuevo directorio de proyecto:

mkdir vuepress-example

A continuación, cambie al nuevo directorio del proyecto:

cd vuepress-example

Luego, inicialice un nuevo proyecto:

npm init --yes

Este comando crea rápidamente un nuevo proyecto y un package.jsonarchivo.

A continuación, instale VuePress localmente como una dependencia de desarrollo con:

npm install vuepress@1.8.2 --save-dev

Una vez instalado VuePress en el proyecto, tendrá todo lo que necesita porque VuePress se entrega con el tema de documentación predeterminado utilizado para este proyecto.

En este punto, debes modificar tus package.jsonscripts para crear y servir el sitio VuePress.

Ábrelo package.jsonen tu editor de código y agrega las líneas de código resaltadas:

paquete.json

{  "name": "vuepress-example",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo "Error: no test specified""  exit 1""
No related posts.