Use VuePress to quickly build blogs, online documents, static websites (VuePress project creation)

Introduction to VuePress

VuePress is a Vue-driven static website generator officially provided by Vuejs, which generates webpages based on Markdown syntax. Simply put, it is a tool for quickly building documentation sites. After simply configuring the functions, all that needs to be done is to write Markdown documents one by one.

VuePress official website

https://www.vuepress.cn

VuePress Guide

https://www.vuepress.cn/guide/getting-started.html

VuePress installation

Please install before installation Node.js

Node.js download address

http://www.nodejs.com.cn

You can create a directory on a hard disk. For example, I create a VuePress directory in the root directory of the D drive, and then double-click to enter this directory. In the path bar of this directory (replace D:\VuePress with cmd Then press Enter) Enter CMD to start cmd to execute the command.

It will start the cmd command line tool in this directory.

VuePress installation command

 npm install -D vuepress

For domestic use, please use cnpm the installation will be faster, you can execute the following command to install cnpm

 npm install -g cnpm --registry=https://registry.npm.taobao.org

Then execute the following command to install VuePress

 cnpm install -D vuepress

Paste the command directly and press Enter to start the installation. As long as the command is still running, the installation has not been completed, and you need to wait patiently.

The above is written in such detail, just to take care of the novice, please don't dislike it. If the novice does not even understand the above operations, it is recommended to learn the basic knowledge of Vue project creation, configuration, operation, packaging and so on.

Create VuePress Documentation

 mkdir docs && echo '# Hello VuePress' > docs/README.md

Configure VuePress

Add the following code to the package.json file in your VuePress project directory.

 {
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

Start a VuePress project

 npm run docs:dev

After startup, an http service will be started in your local

Then you can use the Markdown syntax to write your documents, blogs, articles, etc.!

VuePress further configuration

If you want to further improve your VuePress documentation, or even let VuePress use it like a blog, then you can further configure it according to the guidelines provided by VuePress official website VuePress 's navigation bar, search, logo, sidebar, code highlighting, etc., so that you can quickly learn to use VuePress to write your article.

author of this article

TANKING