Vuepress should have been used by many people, and   VitePress   yes   VuePress   The next generation framework is to support vue 3.0   web site framework.

In its documentation, it is called   Vuepress's brothers have some advantages over others:

1. be based on   Vite   instead of   Webpack   So faster start-up time, hot overload, etc
2. use   Vue3   To reduce   JS   Payload creation for
3. Create your own project directory

mkdir blog-vitepress
cd blog-vitepress

1. Initialize package.json and install vitepress

npm init -y
npm i -D vitepress

1. Add the vitepress execution command to the execution script

"scripts": {
  "dev": "vitepress dev docs --open",
  "build": "vitepress build docs",
  "serve": "vitepress serve docs"
}

1. Create the docs directory in the root directory, and create the first md file (the configuration and content of the website home page). You can manually create it in the file from the command line

mkdir docs
echo '# Hello World' > docs/index.md

1. Start project npm run dev

Project configuration

Add some navigation to our website sidebar and navigation bar. Create a configuration file, create a new. vitepress folder in docs, and create a config.js file inside

// vitepress/config.js
module.exports = {
  title: "My blog",// Website title
  description: 'my vitepress Blog.', //Website description
  base: '/', //  The default path during deployment / secondary address / base can be used/
  // Lang: 'en US', / / language
  // Page header configuration, icon, css, js
  head: [
    // Change the icon of the title
    [
      'link',
      {
        rel: 'icon',
        href: '/img/linktolink.png',//The pictures are placed in the public folder
      },
    ],
  ],
  // Theme configuration
  themeConfig: {
    repo: 'vuejs/vitepress', // Your github warehouse address will jump in the upper right corner of the page
    //   Head navigation
    nav: [
      { text: 'home page', link: '/' },
      { text: 'about', link: '/about/' },
    ],
    //   Side navigation
    sidebar: [
      { text: 'my', link: '/mine/' }
    ]
  }
}

Home page structure (you can also directly use the ordinary markdown format)

// docs/index.md
---
home: true
heroAlt: Logo image
heroText: Welcome!
tagline: Hero subtitle
actionText: Get Started
actionLink: /ts/basics
features:
  - title: Simplicity First
    details: Minimal setup with markdown-centered project structure helps you focus on writing.
  - title: Vue-Powered
    details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
  - title: Performant
    details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2019-present Evan You
---

Project structure

vitepress
    │
    ├─── docs
    │     │
    │     ├── .vuepress
    │     │     └── config.js
    │     ├── public
    │     ├── about
    │     │     └── index.md
    │     ├── mine
    │     │     └── index.md
    │     └── index.md
    └── package.json

Head navigation drop-down

nav: [
  {text: 'front-end technology', items: [
    { text: 'TS', link: '/ts/basics', activeMatch: '^/ts/' },
    { text: 'vue', link: '/skills/vue/' }
  ]}
],

Head navigation and sidebar Association

nav: [
  {text: 'front-end technology', items: [
    { text: 'TS', link: '/ts/basics', activeMatch: '^/ts/' },
    { text: 'vue', link: '/skills/vue/' }
  ]}
],


sidebar: {
  '/ts/': getTsSidebar()
}

function getTsSidebar() {
  return [
    {
      text: 'Basic knowledge',
      children: [
        { text: 'Basics', link: '/ts/basics' }, // Link corresponds to the link of the header navigation, and the access file is docs/ts/basics.md file
        { text: 'Built in type', link: '/ts/inside-type' },
      ]
    },
  ]
}

Deploy github pages

1. Set the correct base in docs/.vitepress/config.js.
2. If you want to deploy to HTTPS: / / < username >. GitHub. IO /, you can omit base because it defaults to "/".
3. If you are deploying to HTTPS: / / < username >. GitHub. IO / < repo > /, for example, your repository is located at GitHub. COM / < repo > /, and then set the base to / < repo >/

By default, the packed dist directory of vitepress is placed under. vitepress/dist /. Xiaobian only sets github pages (readers can find it on Baidu), writes a script, moves the packed dist directory to the root directory, and git push es it to the warehouse. It can be accessed directly through the github address for reference only.

Code expansion

1. Install the vitepress theme demoblock plug-in, github address

npm install -D vitepress-theme-demoblock
# or
yarn add -D vitepress-theme-demoblock

1. Configure config.js

module.exports = {
  markdown: {
    config: (md) => {
      const { demoBlockPlugin } = require('vitepress-theme-demoblock')
      md.use(demoBlockPlugin)
    }
  }
}

1. Inject themes and plug-ins Write the following code in docs/.vitepress/theme/index.ts, where register-components.js does not need to be created by itself. Inject the script into package.json, and the execution script is automatically generated in the docs/.vitepress/theme directory

"scripts": {
  "register:components": "vitepress-rc"
}

Execute npm run register:components

// docs/.vitepress/theme/index.ts

// Import the vitepress theme demoblock theme and register the components (including the default components in the theme).
import Theme from 'vitepress/dist/client/theme-default'

// Import theme styles
import 'vitepress-theme-demoblock/theme/styles/index.css'
// If you want to import your own css files, you can also import them here

// Import the theme of the plug-in
import { registerComponents } from './register-components.js'

export default {
  ...Theme,
  enhanceApp({ app }) {
    registerComponents(app)
  }
}

1. use Use specific syntax to wrap the code in the index.md file in the demo to be displayed, and the component demo display # Button can be generated automatically ::: demo uses' type ',' plain 'and' round 'to define the style of the Button ```vue <template> < my button style = "color: Red" > button 1 < / my button > Middle < my button type = "size" > button2 < / my button > Large < my button > button 3 < / my button > Disabled < my button disabled > button 4 < / my button > </template> :::
   
   vue syntax is supported by default. If you want to modify it, you need to modify the configuration: md.use(demoBlockPlugin{ lang: 'ts' })

However, there is a limitation here. I can intelligently recognize a syntax structure. I think there will be js, ts, json and other grammars, so I changed the parsing structure to array. You can see the writing method on my github.

I've just started to write. There are still a lot of things to explore. If there are some things I will share at the first time. Friends with questions can leave messages!

My blog address

Learning address

• Official documents: https://vitepress.vuejs.org/
• Nuggets explanation: https://juejin.cn/post/6965510644007665671#heading-48