What is VitePress?

VuePress is a VUUe-based documentation tool

VitePress is VuePress’ little brother, built on top of Vite.

VitePress is its younger brother, based on Vite

motivation

VuePress is based on WebPack, while VitePress is based on Vite.

implementation

Initialize the

  1. Build a folder and skip to 3 if there are existing projects
mkdir vitepress-starter && cd vitepress-starter
Copy the code
  1. Initialize the project
yarn init
Copy the code
  1. Add vitePress dependencies
yarn add --dev vitepress
Copy the code

  1. Create a docs folder under the project for your documents and create index.md

  2. Add related script to package.json

{
  "scripts": {
    "docs:dev": "vitepress dev docs"."docs:build": "vitepress build docs"."docs:serve": "vitepress serve docs"}}Copy the code

The above is from official documentation

Home page and related instructions

The layout of the home page of the index.md document is shown in the following figure

There is a Frontmatter in the VitePress document that defines the relevant parts of the document in YAML format

Index. md file contents

home: true # As the home page

actionText: guide # main link
actionLink: /guide/ # main link address

altActionText: Quick learning Deputy link #
altActionLink: /guide/getting-started Deputy address #

features: # Related features
  - title: feature1
    details: feature1 description
  - title: feature2
    details: feature2 description
  - title: feature3
    details: feature3 description
Copy the code

This link definition is different from Vuepress, which is implemented by defining actions

Headings, navigation, and menus can be defined in config.js

Configuration and related instructions

The general document directory structure is as follows

.├ ─ ├─ download.txt ├─ download.txt ├─ download.txtCopy the code

The config.js configuration is stored in the.vitepress directory. Currently, only JS is supported

The basic configuration is as follows

module.exports = {
  title: 'Hello VitePress'./ / title
  description: 'Just playing around.'./ / subtitle
};
Copy the code

Next add the other pages and navigation directories

.├ ─ ├─ exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises package.jsonCopy the code
module.exports = {
  title: 'Hello VitePress'./ / title
  description: 'Just playing around.'./ / subtitle
  themeConfig: {
    // Top navigation bar content
    nav: [{ text: 'guide'.link: '/guide/'}].// Sidebar navigation content
    sidebar: {
      '/guide/': [{text: 'guide'.children: [{text: 'introduction'.link: '/guide/' },
            { text: 'Get started'.link: '/guide/getting-started'},],},],},},},};Copy the code

Here are some common rules for page paths and navigation

  1. directory.mdCorresponding to the generated file.htmlfile
  2. Automatically jumps to when accessing a directory pathindex.mdCorresponding HTML page, for example/guide/Skip to/guide/index.html
  3. The current browser path matchessidebarThe sidebar displays the menu for a defined key prefix
  4. navTop navigation pops up the sub menuitemssaid
  5. ifsidebarOne of these values is zeroauto, the sidebar is automatically generated based on the directory structure

Development and debugging

According to the definition in scripts

yarn run docs:dev # Development debugging
Copy the code
yarn run docs:build # building
Copy the code
yarn run docs:serve # Run as a service
Copy the code