vuepress简单使用

vuepress简单使用

1.基础配置

找个文件夹npm init,生成一个package.json

npm init 
1

加载vuepress

npm install -D vuepress
1

在 package.json 中添加一些 scripts

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
1
2
3
4
5
6

然后就可以运行下试试看,就会发现网站启动了.一般是http://localhost:8080

2.添加md文件

VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── aaa
│   │   └── README.md
│   │   └── aaa-1.md
│   │   └── aaa-2.md
│   └── bbb.md
│ 
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

要新建一个docs文件夹
其中,docs/.vuepress 是配置文件夹.

其他的就是具体的md文件页面.
注意有些规则:

• README.md = index.html = /
  比如上面的docs/README.md 在浏览器上的访问路径就是 /
• xxx.md = xxx.html
  比如上面的docs/bbb.md 在浏览器上的访问路径就是 /bbb.html
• docs/aaa/README.md 访问路径就是/aaa/
  docs/aaa/aaa-1.md 访问路径就是/aaa/aaa-1.html

我们在项目里面添加些md文件,重新启动项目,就可以在浏览器里面查看了

---

3.添加标题和侧边栏

新建docs/.vuepress/config.js

module.exports = {
  title: '我是左上角',
  themeConfig: {// 主题设置
    sidebar: {//左侧列表
        '/': [{
            title: '我是大菜单AAA',
            children: [
                {title: '1. aaa1小标题', path: '/aaa/aaa-1.html'},
                {title: '2. aaa2小标题', path: '/aaa/aaa-2.html'},
            ]
        },{
            title: '我是大菜单BBB',
            path: '/bbb.html'
        },]  
    }
  },
  

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这样的配置,就可以添加左上角标志以及侧边栏.