yarn install
yarn dev
yarn build
yarn docs
build 配置文件目录
下面的内容，旨在说明如何完成 vuepress 的配置，不进行安装说明。
注意： 需要先查看 vuepress 的结构目录，添加配置文件，完善基本的结构。 以下内容的配置都是基于默认主题来的，并不适用于所有的主题。
静态文件存放在 .vuepress/public 目录中。在该目录下的文件在打包时会自动复制到项目的根节，比如，在 public 目录下有一个 images 文件夹，访问该文件夹就可以在 *.md 文件中用 /images/** 进行访问。
修改首页的配置
---
home: true # 是否为首页
heroImage: /images/home/spap-logo.jpg # 默认主题的首页大图
heroText: SPAP-UI # 默认主题的首页标题
tagline: 基于 vue2.0 的桌面端组件库 # 默认主题的首页描述
---不得不说，阅读官方手册首先要通篇全读，不能看一点儿做一点儿，不然还真不好理解其中的含义。通篇全读之后在回来细致查看，注意里面的配置细节，这样才能保证成功。
导航
此处设置的导航，是显示在头部右侧的。需要自行设置导航的名称以及链接，支持外部链接，最终生成 a 标签。如果需要生成下拉菜单，或者给下拉菜单分组，都可以参考手册进行设置，此处手册给出的相对还是比较完善的。导航设置参考手册
注意： 这里的配置必须要放在
themeConfig中。
// .vuepress/config.js
module.exports = {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'Bryan', link: 'https://www.yihdot.com' },
]
}
}导航的设置相对比较简单，只要注意主题应用，设置了基本上就能成。相对比较麻烦的就是侧边栏的设置。
侧边栏
侧边栏的设置可谓是比较复杂的，值可以是字符串、数组、对象。各个方式都不同。而且还会比较郁闷的是，发现设置了侧边栏之后并没有生效，侧边栏还是不显示，这就是配置不正确的原因造成。
1/ 首先解决设置了侧边栏不显示的问题。
不知道是不是我的问题，侧边栏一直都不显示，晚上又找不到相关的问题。首先说明一下遇到这种问题的情况。栏目下的 md 文件为了省力都是复制的，基本上都是复制的首页，在读取到首页配置的时候就会隐藏掉侧边栏，所以解决侧边栏不限时的问题，就需要将 md 文件里的配置过滤一下。这个时候那么不配置，左侧也会有一片的空白区域。
2/ 关于 'auto'
设置侧边栏的值为 'auto'，根据官方手册的说法是自动生成侧边栏。经个人测试，生成的侧边栏仅仅是当前文章的列表，无法加入其他文章标题和列表。所以说，想要想手册上那样，可以在多个页面之间跳转，还是需要进行手动设置。
3/ 手动配置侧边栏
侧边栏参考手册
刚开始看手册的时候一脸懵逼啊，这是啥跟啥。看的多了才慢慢反应过来。
- 支持字符串 ‘auto’;
- 支持数组，指定侧边栏对用的文件，这里需要注意的就是
/的用法；
-
/page_one表示的找当前目录下的page_one.md文件; -
/page_one/表示找当前目录下的page_one/README.md文件； -
['/page_one', 'one title']表示当前目录下的page_one.md文件引入侧边栏，使用自定义主题one title;
- 支持对象，支持多语言，多页面，多侧边栏以及侧边栏分组；
- 生成侧边栏的标题层级；
- 侧边栏是否展开；
因官方手册说法模糊，亲测多次，实现在项目中引入组件中的 *.scss 文件。
配置
首先需要在 config.js 中进行设置，使其支持scss。并配置 webpack 别名，方便文件引入。
// .vuepress/config.js
module.exports = {
// ...
sass: { indentedSyntax: true }, // 支持 *.scss 样式文件
// 设置 webpack 别名
configureWebpack: {
resolve: {
alias: {
"@src": path.resolve("../../src/")
}
}
}
// ...
}引入 scss 文件
需要在 .vuepress 文件夹下新建 enhanceApp.js 文件，方便引入扩展或者插件，而外部样式的引入就需要在这个文件中进行。
// .vuepress/enhanceApp.js
// 引入组件样式
import '@src/assets/them/index.scss'引入组件
上面的配置和文件操作实际就是在为引入组件做准备。 如果之前两部都已经完成，只需要找到组件所在的目录即可完成组件的引入。
+ import SpapUI from '@src/components';
import '@src/assets/them-default/index.scss'
+ export default ({
+ Vue, // VuePress 正在使用的 Vue 构造函数
+ options, // 附加到根实例的一些选项
+ router, // 当前应用的路由实例
+ siteData // 站点元数据
+ }) => {
+ Vue.use(SpapUI); // 加入组件
+ };自定义容器的重点是将 markdown 转换成 html。所以需要安装 markdown 相关插件。
| 依赖名 | 功能说明 |
|---|---|
| markdown-it | 渲染 markdown 基本语法 |
| markdown-it-anchor | 为各级标题添加锚点 |
| markdown-it-chain | 以链式方式调用 markdown-it API(类似于webpack的webpack-chain的) |
| markdown-it-container | 用于创建自定义的块级容器 |