Quickly create a document project with vitepress


In fact, to develop a project is the most necessaryOperation documentThe quality of documents determines the development process, development specification and so on.

For the front-end framework, the document is the most friendlyvueIt is not only the framework of Chinese people, but also the document supports Chinese. Check Vue’s official documents, andVue-Router,Vuex,Vite. It is found that the large documents are all carved out of a template, and they are also very simple and easy to use.

It was usedVitePressThe document generated by this framework, let’s use this framework quickly and skillfully.

So I wrote one myselfreact-ant-adminIt’s very fast to develop with vitepress, so I finished itdoc-react-ant-adminDocument writing.

Doc react ant admin document source code

Installation and use

  • 1.Create directory
D:>mkdir vitpress_demo && cd vitpress_demo
  • 2.Package management tool initialization
D:\vitpress_demo>npm init -y
  • 3.Install vitepress dependency
D:\vitpress_demo>npm i vitepress -D
  • 4.establishdocsfolder
D:\vitpress_demo>mkdir docs
  • 5.staydocsCreate under folderindex.mdFile and write content
# hello world
  • 6.Create NPM script and start it quickly,

findpackage.jsonmodifyscriptsItems are as follows

  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  • 7.NPM script startup project
D:\vitpress_demo>npm run docs:dev

openhttp://localhost:3000that will do

Configuration introduction

staydocsCreate under folder.vitepressFolder, and in the.vitepressCreate under folderconfig.js

The content of the config.js file needs to be exported to a module, and the content in this module needs to be defined by itself before it will take effect. And every change needs to restart the project to take effect.

module.exports = {
  Title: "react ant admin", // top left title
  Base: "/ doc react ant admin /", // the root path of the project
  head: [
    //Set description and keywords
      {Name: "Keywords", content: "react react admin ant background management system"},
        name: "description",
          "This framework uses and secondary development, front-end framework uses react, UI framework uses ant design, global data state management uses Redux, AJAX library uses Axios. It is used to quickly build middle and background pages. ",
  themeConfig: {
    sidebar: {
      "/": [
          Text: "Introduction",
          children: [
            {text: "what is react ant admin?", link: "/" },
            {text: "start using", link: "guide / start"},
            {text: "file configuration", link: "guide / configuration"},
            {text: "path configuration", link: "guide / path"},
    nav: [
      //Top right navigation bar
      { Text: "Introduction", link: "/", activeMatch: "^/$|^/guide/" },
        Text: "preview address",
        link: "https://azhengpersonalblog.top/react-ant-admin/",
        Text: "more addresses",
        link: "/contact/",

Use caution

staydocsFoldermdThe document will bedocsThe folder is a path map

  • give an example
├─ .vitepress
├─ test
│├ - index.md URL path / test/ 
│ └ - start.md URL path / test / start.html       
├─ guide            
│├ - configuration.md URL path / guide / configuration.html
│ └ - start.md URL path / guide / start.html  
└ - index.md URL path/