02-VuePress Diseño - principio de funcionamiento

1. ¿Qué VuePress

　　VuePress de un sitio web es una Vue , Router Vue y webpack aplicación de una sola página impulsada

2, inicio rápido VuePress

@ Hilados de instalación: https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable 

# VuePress dependerá montada como un local de 
Hilados de Agregar -D o vuepress #: NPM instalar vuepress -D

// 1, crear carpetas, y entrar 
mkdir vuepress-Starter && cd vuepress- arranque  
 // 2, inicializar el proyecto 
del hilo de la Crear vuepress
 // 3, para iniciar el proyecto 
dev hilo

docs/.vuepress: Se utiliza para almacenar la configuración global, componentes, recursos estáticos.
docs/.vuepress/components: Este directorio de montaje Vue se registrará automáticamente como componentes globales.
docs/.vuepress/theme: Se utiliza para almacenar un tema local.
docs/.vuepress/styles: Se utiliza para almacenar documentos relacionados con el estilo.
docs/.vuepress/styles/index.styl: Se aplicará automáticamente el archivo de estilo global será generada al final del archivo CSS final, que tiene una prioridad más alta que los estilos predeterminados.
docs/.vuepress/styles/palette.styl: Se utiliza para anular las constantes de color por defecto, o establecer una nueva constantes de color lápiz.
docs/.vuepress/public: Directorio de recursos estáticos.
docs/.vuepress/templates: Archivos de plantilla HTML tienda.
docs/.vuepress/templates/dev.html: HTML plantilla de archivos para el entorno de desarrollo.
docs/.vuepress/templates/ssr.html: HTML plantilla de archivos basados en Vue SSR en la construcción.
docs/.vuepress/config.js: Archivo de configuración del archivo de entrada, y puede ser YML o toml.
docs/.vuepress/enhanceApp.js: Aplicación de cliente mejorada.

3, tema VuePress

= module.exports { 
    Tema: 'vuepress-tema de los ejes X',   // configuración temas nombres - temas oficiales y comunitarias 
    themeConfig: { // otro tema de configuración 
        // ... 
    } 
}

// tema personalizado 
primero crear un directorio .vuepress / tema en el directorio raíz de documentos, 
a continuación, crear un archivo Layout.vue:

Aquí, al igual que el desarrollo de una aplicación común Vue misma. Cómo organizar su tema, todo depende de usted.

4, plug-in

// plugins 
puede hacer algunas .vuepress dispuesto / config.js enchufe en uso: 
module.exports = { 
  plugins: [ 
    la requieren ( ' ./my-plugin.js' ) 
  ] 
} // usar depende de conecte 
un plugin para vuepress-plugin- forma de liberación xxx a la NGP, se puede utilizar de esta manera: 
module.exports = { 
  plugins: [ 'vuepress-plugin-XX' ] 
}

// enchufe desarrollo 
un plug-in debe exportar un objeto JavaScript llano (# 1), si el plug-in necesidad de opciones de configuración, entonces puede ser una función devuelve un objeto (# 2 ), esta función acepta plug-in opciones de configuración para la primera parámetro que contiene el tiempo de compilación ctx contexto de objeto como el segundo parámetro. 

// #. 1 
module.exports = {
    // ... 
} 

// # 2 
module.exports = (Opciones), CTX => {
    retorno {
       // ... 
   } 
} 

// el TIP 
un tapón VuePress debe ser un CommonJS módulo, porque VuePress plug-in carreras en extremo Node.

02-VuePress Diseño - principio de funcionamiento

Supongo que te gusta