vuepress侧边栏配置_VuePress 快速踩坑小结

最近有个开源项目非常火，那就是尤小右开发的 VuePress，VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码，并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePress 针对 Markdown 文件做了一些扩展使其功能更加强大，本文将围绕搭建一个 Github 的静态博客展开。

为项目加入 VuePress

第一步为您的项目安装 VuePress，如果您的项目代码中并没有 package.json文件，请先执行 npm init。

npm install -D vuepress // 或者 yarn add -D vuepress

// 在项目根目录下新加 docs 文件夹

mkdir docs

// 新建一个 Markdown 文件

echo "# Hello VuePress!" > docs/README.md

第二步在 package.json 中加入这些脚本，并运行。

// package.json

"scripts": {

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

"docs:build": "vuepress build docs"

}

// 本地运行文档

npm run docs:dev

// 编译打包生产静态 HTML 文件

npm run docs:build

VuePress 对 Markdown 做了一些扩展，使得我们可以在 Markdown 文件中使用 YAML 语法，VuePress 使用 ---来隔离 Mark