vuepress侧边栏配置_VuePress 入门

本人刚用 VuePress 写完一个 UI 框架的文档：https://zyqq.github.io/wheel 确实很好用且自带PWA，访问速度飞快。特此总结使用方法。

安装

1. 全局安装

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > CORE 2

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

2. 局部安装

如果想在一个现有项目中使用 VuePress，同时想要在该项目中管理文档，则应该将 VuePress 安装为本地依赖。作为本地依赖安装让你可以使用持续集成工具，或者一些其他服务（比如 Netlify）来帮助你在每次提交代码时自动部署。

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
npx vuepress dev docs

注意最好用 yarn 安装，本人亲测用 npm 安装总会因 webpack 版本以及依赖等报错，而且用 yarn 安装速度更快。

初始化

在根目录创建一个docs目录，所有 VuePress 相关的文件都将会被放在这里，在其下面创建一个.vuepress目录，这里主要写配置以及可以引入 Vue 组件

确保目录结构为以下

├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

.vuepress目录下创建一个config.js文档，内容如下

module.exports = {
    
  title: 'Hello VuePress',
  description: 'Just playing around'
}