使用vuepress构建你的页面

初始化

如果你想在一个现有项目中使用Vuepress那么你就按下面操作

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
npx vuepress dev docs

接着，在 package.json 里加一些脚本:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

然后就可以开始写作了:

yarn docs:dev # 或者：npm run docs:dev

目录结构搭建

1. 在你生成的docs目录下创建你需要搭建的目录结构
   我这里新建了三个目录，分别是install和get-started和components，install和get-satrted目录里都要有一个README.md文件，用来显示它的页面内容，components里面写我们的组件比如button.md

2. 在你的docs目录下建一个.vuepress/config.js文件，里面的内容如下：

module.exports = {
  //页面顶部title
  title: 'Hello VuePress',
  //页面描述
  description: 'Just playing around'
}

3. 我们想要我们上面创建的两个文件对应的内容在右边显示，标题显示在左边作为导航，这时我们就需要继续在config.js里写配置

module.exports = {
  themeConfig: {
    sidebar: [
      '/install/',
      '/get-started/'
    ]
  }
}

你可以省略 .md 拓展名，同时以 / 结尾的路径将会被视为 */README.md，所以上面的/install/就相当于/install/README.md
这里我们要在侧边栏导航定义的标题需要在我们的README.md里声明一下

---
title: 快速上手
---

# 快速上手

上下各用三根杠，然后中间写一个title，后面的名字就是你侧边栏显示的名字

侧边栏嵌套目录

我们想要做一个二级目录，那么久直接在config.js里这样写

themeConfig: {
  sidebar: [
    {
      title: '入门',
      children: [
        '/install/',
        'get-started/',
      ]
    },
    {
      title: '组件',
      children: ['/components/button']
    }
  ]
}

页面就会变成这种结构

如何在页面中使用我们的组件

在.vuepress目录下，新建一个components目录，这里注意目录名必须是components，然后在这个目录下建立vue组件，比如我建的是button-demos.vue，然后直接在这个组件里引入我们已经写好的组件，局部注册一下

最后在我们之前的docs里的components/button.md里直接使用你上面定义的文件名的组件就行

---
title: Button
---

# 按钮

使用方法

这样我们的button组件就显示在页面中了

提交发布你的代码

1. 将你的代码提交到线上的之前先通过

npm run docs:build

来生成你的静态页面，这时候你build的过程中会出现一个报错

解决方法：在你的button.md里面使用组件的时候加一个标签

如果你要部署到github上

1. 在 docs/.vuepress/config.js 中设置正确的 base

如果你打算发布到 https://.github.io/，则可以省略这一步，因为 base 默认即是 "/"。

如果你打算发布到 https://.github.io//（也就是说你的仓库在 https://github.com//），则将 base 设置为 "//"(仓库名)。

我这个是在我的仓库下建的项目，所以直接

base: '/gulu-demo/'

2. 在你的项目中，创建一个如下的 deploy.sh 文件（请自行判断去掉高亮行的注释）:

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://.github.io
# git push -f [email protected]:/.github.io.git master

# 如果发布到 https://.github.io/
# git push -f [email protected]:/.git master:gh-pages

cd -

因为我用的是仓库，所以我直接把最后那一句解开注释，改成我的用户名和仓库

git push -f [email protected]:wanglifa/gulu-demo.git master:gh-pages

如果是windows用户就可以直接运行

./deploy.sh

，如果不是，你需要运行

//给它添加一个可执行权限
chmod +x deploy.sh

然后再运行./deploy.sh就可以在github上预览了