vuepress官网:https://vuepress.vuejs.org/zh/
参考链接:https://segmentfault.com/a/1190000017055963
安装
1.全局安装
# 安装
yarn global add vuepress # 或者:npm install -g vuepress
# 创建项目目录
mkdir vuepress-starter && cd vuepress-starter
# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md
# 开始写作
vuepress dev .
# 构建静态文件
vuepress build .
2.现有项目安装
# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者:npm install -D vuepress
# 新建一个 docs 文件夹
mkdir docs
# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md
# 开始写作
npx vuepress dev docs
注意事项
如果你的现有项目依赖了 webpack 3.x,推荐使用 Yarn 而不是 npm 来安装 VuePress。因为在这种情形下,npm 会生成错误的依赖树。
接着,在 package.json 里加一些脚本:
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
然后就可以开始写作了:
yarn docs:dev # 或者:npm run docs:dev
要生成静态的 HTML 文件,运行:
yarn docs:build # 或者:npm run docs:build
配置文件
配置需要在文档目录下创建一个.vuepress目录,所有 VuePress 相关的文件都将会被放在这里。
目录结构
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
其中有一个最重要的文件.vuepress/config.js,网站的所有文件的配置都在这个文件里面,需要创建该文件touch .vuepress/config.js,该文件要导出一个JavaScript 对象:
module.exports = {
title: '个人文档',
base: '/docs/',
description: '练习文档'
}
base为文件路径
导航栏和侧边栏配置
链接:https://vuepress.vuejs.org/zh/config/#themeconfig
module.exports = {
title: '个人文档',
base: '/docs/',
description: '练习文档'
themeConfig: {
sidebarDepth: 3,
sidebar: [
{
title:'新手指南',
children:['/','/home1']
},
{
title:'开始',
children:['/home2','/home3']
}
]
}
}
sidebarDepth为侧边栏展示深度,可展示至三级标题
相应md文件中标题,侧边栏可根据该标题显示文本,否则使用一级标题显示
---
title: home1
---