快速上手

启动项目

yarn dev

打开浏览器，输入http://localhost:8080 即可以看到本地预览

---

添加导航

/docs/.vuepress/config/themeConfig/nav.js

在该文件下添加 { text: string, link: string} 格式的导航信息，text为显示标题， link为跳转地址

导航栏分为以下几种

• url 外链地址
• 具体指向某个页面
• 某个文件夹

指向某个文件夹的时候，默认指向该文件夹下 index.md 内容（新建文件夹后，重新运行会自动生成 index.md 二级导航页面，可自行修改）， 也可手动指定跳转页面。指向文件夹的导航，需要有对应的sidebar, 此时会移动鼠标 hover, 会根据 sidebar 内容自动生成下拉菜单。

module.exports = [
  { text: '指南', link: '/multi-page/' }， //  某个文件夹
  { text: '指南', link: '/single-page' }， // 具体指向某个页面
  { text: 'VuePress', link: 'https://vuepress.vuejs.org' }  // url 外链地址
]

---

添加页面

比如在/guide/下新增一篇文章来说明如何安装环境，那么在/guide/ 目录下新建一个名称为prepare-env.md的文件，然后编写内容。编写完成后，在/.vuepress/config/themeConfig/sidebar.js中插入相应的

module.exports = {
  '/guide/': [
    ['/guide/prepare-env', '环境准备']
}

---

修改首页

/docs/index.md /docs/.vuepress/theme/components/Home.vue

首页在 layout 布局中, 是否显示 home 是 index.md 中配置 frontmatter 信息，通过 $page.frontmatter获取

<!-- index.md -->

---

home: true
sidebar: false

---

// Loyout.vue
<template>
  <div class="theme-container">
    <Navbar /> ...

    <Sidebar /> ...

    <Home v-if="$page.frontmatter.home" /> ...

    <Page v-else /> ...

    <Footer />
  </div>
</template>