最终效果
开发流程
1. 新建文件夹 mydocs
2. 初始化项目
进入项目文件夹 mydocs，执行命令
yarn init
一直回车使用默认配置即可。
3. 安装 VuePress
yarn add -D vuepress
4. 添加项目
在 package.json 中添加
"scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" },
5. 添加 .md文件
在项目目录下，新建文件夹 docs，将需要管理/展示的.md文件放入其中
重要注意事项：只有.md文件的第一个一级标题会被添加到左侧目录，其他一级标题都无效！
所以，建议所有 .md文件只在开头创建一个一级标题
其中必须要有 README.md 文件，因为默认路由 “ / ” 将展示 README.md文件（本范例写入了以下内容）
# 欢迎来到我的编程笔记世界！
6. 添加项目配置
在 docs 文件夹下新建文件夹 .vuepress ，并在 .vuepress文件夹中新建文件 config.js，写入以下内容：
module.exports = { // 左上角网站标题 title: '编程笔记', themeConfig: { // 左侧目录 - 路由必须与文件名相同 sidebar: [ '/', // 展示README.md '/Selenium', // 展示Selenium.md '/el-form', // 展示el-form.md ], // 右上角导航 - 超链接跳转 nav: [ {text: 'DOS编程俱乐部', link: 'http://106.12.123.173/#/dic'}, ] }, // 自定义根路由 base: '/doc/', // markdown 展示效果的相关配置 markdown: { // 显示代码行号 lineNumbers: true, }, // 更改默认的Webpack配置 configureWebpack: { resolve: { // 配置文件路径别名 alias: { '@': '/src' } } } }
此时项目的目录结构如下：
7. 运行项目
yarn docs:dev
访问 http://localhost:8080/doc/ 可以查看到效果
参考资料
VuePress官网 https://www.vuepress.cn/guide/getting-started.html
VuePress配置 https://www.vuepress.cn/theme/default-theme-config.html#侧边栏
