Vuepress创建工程并初始化

新建一个文件夹

在当前目录打开命令行，执行命令创建packet.json

npm init -y

用编辑器（vscode）打开当前文件在test行后追加内容

    "dev":"vuepress dev docs",
    "build":"vuepress build docs"

最终如下

{
  "name": "heiyanche",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"vuepress dev docs",
    "build":"vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

创建docs文件夹

再在docs目录下创建.vuepress文件夹

在.vuepress文件夹下创建config.js

在config.js输入下面的内容

module.exports = {
    title: '知识网',
    description:'你想了解都在这'
}

在docs目录下创建README.md

输入下面的内容（为了制作网站首页）

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

打开命令行，在项目目录运行,等待运行完成

vuepress build docs

看到上图运行完成后，继续输入命令

npm run dev

等待运行完成

在浏览器输入http://localhost:8080 即可浏览效果

注意事项，需要在.vuepress下创建public文件夹，并在此文件夹下放图片

同时README.md的路径要修改正确