Quickly create a document project with vitepress

Time:2021-5-12

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
    [
      "meta",
      {Name: "Keywords", content: "react react admin ant background management system"},
    ],
    [
      "meta",
      {
        name: "description",
        content:
          "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: {
      //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
docs
├─ .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/