需要全局安装
npm install -g vuepress
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
然后项目可以通过npm run dev
运行测试浏览,通过npm run build
进行打包。
6. 在docs目录下新建.vuepress目录,mkdir .vuepress
7. 在.vuepress目录新建config.js文件, vuepress配置文件
8. 在.vuepress目录新建public文件夹,放置静态资源文件
到此项目结构
project
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
└── package.json
示例:
config.js
module.exports = {
title: '网页名称',
description: '文档描述',
themeConfig: {
search: false,
nav: [
{ text: 'Home', link: '/' },
{ text: 'External', link: 'https://google.com' },
],
sidebar: [
['/', '简介'],
['/pageone/index1.md', '第一页标题'],// index这个名称不能使用
['/pagetwo/feedback.md', '第二页标题'],
{
title: "多级",
collapsable: true,
children:[
['/pagethree/1.md', '页面1'],
['/pagethree/2.md', '页面2']
]
},
]
}
}
对应的结构
project
├─── docs
│ ├── README.md
│ └── .vuepress
│ │ ├── public
│ │ └── config.js
│ ├── pageone
│ │ └──index1.md
│ ├── pagetwo
└── package.json
如果index1.md内容插入图片,可以在pageone目录下新建一个img目录,内放图片资源,然后在index1.md中使用相对路径引入。
参考连接:
https://segmentfault.com/a/1190000015237352?utm_source=tag-newest
https://segmentfault.com/a/1190000020097643
https://www.jianshu.com/p/c590ef514fca(推荐)