这篇文章主要是记录自己在使用vuepress过程中所遇到的问题以及如何一步一步的解决问题。

安装vuepress前，请确保你的 Node.js 版本 >= 8

全局安装

# 安装 yarn global add vuepress # 或者：npm install -g vuepress  # 新建一个 markdown 文件 echo '# Hello VuePress!' > README.md  # 开始写作 vuepress dev .  # 构建静态文件 vuepress build .

注意 ：vuepress dev .和vuepress build .后面的.。

在现有项目中安装

# 将 VuePress 作为一个本地依赖安装 yarn add -D vuepress # 或者：npm install -D vuepress  # 新建一个 docs 文件夹 mkdir docs  # 新建一个 markdown 文件 echo '# Hello VuePress!' > docs/README.md  # 开始写作 npx vuepress dev docs

接着，在 package.json 里加一些脚本:

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

开始写作

yarn docs:dev # 或者：npm run docs:dev

第一个坑：我的项目就是依赖webpack 3.6.0同时也是用npm安装依赖，然后继续使用npm安装vuepress，然后执行npx vuepress dev docs的时候报错了，上网查了好久也没有解决问题，最后使用yarn安装vuepress成功了。

如果你的现有项目依赖了 webpack 3.x，推荐使用 yarn而不是 npm 来安装 VuePress。

要生成静态的 HTML 文件，运行：

yarn docs:build # 或者：npm run docs:build

默认情况下，文件将会被生成在 .vuepress/dist，也可以通过 .vuepress/config.js 中的 dest 字段来修改.

以上步骤都成功以后，就可以在浏览器总看到页面了，接下来就是对页面进行布局

主题配置

本文是根据vuepress默认主题配置

1.首页