VuePress 文档地址
项目初始化
mkdir vuepress-demo
cd vuepress-demo
npm init -y
安装 vuepress 为本地依赖
yarn add vuepress -D
创建 docs 目录 在markdown文件中随便写点东西
WeChat90b563326f915428c9f33e0072cbe31c.png
修改package.json的script启动脚本
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
启动,默认是 http://localhost:8080/
yarn docs:dev
image.png
主题配置,docs目录下添加 .vuepress/config.js,详情看文档 https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F
config.js 中的配置代码
// VuePress 的配置文件
module.exports = {
title: 'Hello VuePress', // meta 中的 title
description: 'Just playing around', // meta 中的 description
themeConfig: {
nav: [{ // 导航栏
text: 'Home',
link: '/'
},
{
text: 'Guide',
link: '/guide/'
},
{
text: 'External',
link: 'https://google.com'
},
],
sidebar: [ // 侧边栏
'/',
'/page-a',
['/page-b', 'Explicit link text']
]
}
}
生成的文档
image.png
项目的目录结构
image.png
注意
- 配置侧边栏的路径一定要存在
- 如果没有及时热更新,就重新运行 yarn docs:dev
