DOCSEARCHbyAlgolia
Submit Docs

VuePress v2 Documentation

website·Indexed 31 days ago

https://ahong18s.github.io/demo.vuepress2

A Vue-powered static site generator that converts Markdown files into a Vue SFC. This documentation covers site configuration, i18n, deployment, and the Plugin and Theme APIs, including guides on migrating from v1 and using bundlers like Vite.

Tokens
63.3K
Snippets
382
Records
512
Agent score
73%

What's inside VuePress

  1. Overview of VuePress

    VuePress is a markdown-centered static site generator designed for creating content-centric sites such as documentation and blogs. It allows users to write content in Markdown and generates a static site for hosting.

  2. Overview of VuePress

    VuePress is a Markdown-centric static site generator designed to help users build documentation, blogs, and other static websites. It allows users to write content in Markdown and automatically generates a static website to display that content.

  3. Use Markdown syntax extensions in VuePress

    VuePress uses markdown-it to parse content. In addition to standard Markdown, it includes built-in support for GFM Tables and Strikethrough. Users can further customize the parser by loading additional markdown-it plugins via the markdown and extendsMarkdown configuration options.

  4. VuePress Architecture and Performance Overview

    VuePress is a markdown-centered project structure that allows the use of Vue components within markdown and the development of custom themes using Vue. It uses Vite (default) or Webpack as a bundler. For performance, it generates pre-rendered static HTML for each page and then functions as a Single Page Application (SPA) once the page is loaded.

  5. Understand the VuePress monorepo structure

    VuePress uses a monorepo setup with pnpm workspaces. The project is divided into two main directories:

    packages/ (Core logic):

    • bundler-vite: Vite-based bundler for VuePress apps.
    • bundler-webpack: Webpack-based bundler for VuePress apps.
    • cli: Command line interface for config resolution and app creation.
    • client: Client entry, types, and composable utilities.
    • core: Pure Node API for page handling, plugin system, and data preparation.
    • markdown: Markdown parser using markdown-it.
    • shared: Utilities shared between Node and client side.
    • utils: Node-side only utilities.

    ecosystem/ (Plugins and Themes):

    • plugin-${name}: Official plugins.
    • theme-default: The default theme.
    • vuepress: Wrapper for vuepress-vite.
    • vuepress-vite: Combined package of CLI, Vite bundler, and default theme.
    • vuepress-webpack: Combined package of CLI, Webpack bundler, and default theme.

  6. Understand the VuePress Node App vs Client App architecture

    VuePress is split into two main execution environments. This distinction is critical when developing plugins and themes:

    1. Node App: Responsible for generating temporary files (pages, routes, etc.). The entry file of a plugin or theme is loaded here.
    2. Client App: Handled by the bundler like a standard Vue SPA. This environment loads client-side files, such as components and client configuration files.

  7. Understand the VuePress Node App and Client App architecture

    VuePress is split into two primary environments, which is critical for developing plugins and themes:

    1. Node App: Responsible for generating temporary files (such as pages and routes). Plugin and theme entry files are loaded here.
    2. Client App: This is the Vue SPA that is processed by the Bundler. Client-side files, such as components and client configuration files, are loaded here.

  8. Understand VuePress rendering and architecture

    VuePress uses a Markdown-centric project structure that allows the use of Vue components within Markdown files and the development of custom themes using Vue. It uses Vite (by default) or Webpack as the bundling tool. VuePress pre-renders every page into static HTML, and each page then runs as a Single Page Application (SPA) upon loading.

  10. VuePress Monorepo Architecture Overview

    VuePress uses a pnpm workspace-based Monorepo. The project is split into core packages and ecosystem packages:

    Packages (/packages):

    • bundler-vite: Vite-based bundler for dev and build operations.
    • bundler-webpack: Webpack-based bundler for dev and build operations.
    • cli: Command line interface for config parsing and App creation.
    • client: Client-side entry points, types, and utility functions.
    • core: Node API for creating VuePress Apps (page logic, plugin system, data preparation).
    • markdown: Markdown parser based on markdown-it with integrated plugins.
    • shared: Utility functions for both Node and Client environments.
    • utils: Utility functions exclusively for Node environments.

    Ecosystem (/ecosystem):

    • plugin-${name}: Official plugins.
    • theme-default: The default theme.
    • vuepress: Wrapper for vuepress-vite.
    • vuepress-vite: Bundle of @vuepress/cli + @vuepress/bundler-vite + @vuepress/theme-default.
    • vuepress-webpack: Bundle of @vuepress/cli + @vuepress/bundler-webpack + @vuepress/theme-default.

  11. Diagnose VuePress environment and dependencies

    Use the vuepress info command to display detailed information about your current system and installed dependencies. This is recommended when troubleshooting environment issues or submitting a bug report (Issue).
    vuepress info

  12. Process Markdown content as Vue components

    VuePress converts Markdown content into HTML using markdown-it, and then treats that HTML as the <template> of a Vue Single File Component (SFC). This allows developers to use Vue template syntax directly within Markdown files.