共计 1208 个字符，预计需要花费 4 分钟才能阅读完成。
使用技术：
VuePress – Vue 驱动的静态网站生成器
仓库地址：https://github.com/yinian-R/v…
全局安装
## 安装
yarn global add vuepress # 或者：npm install -g vuepress
现有项目
如果你想在一个现有项目中使用 VuePress，同时想要在该项目中管理文档，则应该将 VuePress 安装为本地依赖。
## 没有项目可以初始化
yarn init
## 将 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”
}
}
基本配置
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：
module.exports = {
title: ‘Hello VuePress’,
description: ‘Just playing around’
}
静态资源
创建 public 文件夹，主要用于存放静态资源
.
├─ docs
│ └─ .vuepress
│ └─ public
│ └─ image
│ └─ favicon.ico
添加网站 favicon，修改 .vuepress/config.js 内容
module.exports = {
head:[
[‘link’, {rel:’icon’, href:’/image/favicon.ico’}]
]
};
导航栏
你可以通过 themeConfig.nav 增加一些导航栏链接:
module.exports = {
themeConfig: {
nav: [
{text: ‘ 主页 ’, link: ‘/’},
{text: ‘ 配置 ’, link: ‘/guide/’},
{
text: ‘ 语言 ’,
items: [
{text: ‘ 中文 ’, link: ‘/language/chinese/’},
{text: ‘English’, link: ‘/language/english/’}
]
},
{text: ‘GitHub’, link: ‘https://github.com’}
]
}
};
侧边栏
想要使 侧边栏（Sidebar）生效，需要配置 themeConfig.sidebar，基本的配置，需要一个包含了多个链接的数组：
module.exports = {
themeConfig: {
sidebar: [
‘/’,
[‘/hello’, ‘hello page’]
]
}
};