介绍
在之前为了搭建 VuePress 的文档，顺带制作了视频教程，如今准备再次搭建一个 VuePress 的项目，一看自己的视频竟然有五个小时，天呐，我只是需要过一遍而已，所以重新整理成文档吧，万一将来又要用呢……
当然，如果您觉得文字版不够直观，可以前往观看视频版： 【☛ 视频地址 ☚】 ，当时录制完本地测试后觉得声音大小还可以，结果一套录完了才发现声音很小，所以推荐带上耳机。
VuePress 文档示例
插件列表
为了方便的统一管理 plugin，需要对 docs/.vuepress/config.js 进行配置：
// docs/.vuepress/config.js
const pluginConf = require('../../config/pluginConf.js');
module.exports = {
plugins: pluginConf,
}
复制代码插件的很多服务都需要对 head 标签进行修改：
// docs/.vuepress/config.js
const headConf = require('../../config/headConf.js');
module.exports = {
head: headConf,
}
复制代码之后就可以去修改 config/pluginConf.js 和 config/headConf.js 文件了。
1. PWA
具体的 PWA 配置介绍可以看 官方文档，对应的 视频（8:20） 。
VuePress 的版本会导致使用方式不一致，此处仅介绍 1.x 版本：
安装：
yarn add -D @vuepress/plugin-pwa@next
# OR npm install -D @vuepress/plugin-pwa@next
复制代码使用：
module.exports = {
'@vuepress/pwa': {
serviceWorker: true,
updatePopup: {
message: "发现新内容可用.",
buttonText: "刷新",
// 自定义弹窗
// popupComponent: 'MySWUpdatePopup',
}
},
};
复制代码PWA NOTES：
serviceWorker选项仅仅用来控制 service worker，为了让你的网站完全地兼容 PWA，你需要在.vuepress/public提供 Manifest 和 icons，更多细节，请参见 MDN docs about the Web App Manifest. 此外，只有您能够使用 SSL 部署您的站点时才能启用此功能，因为 service worker 只能在 HTTPs 的 URL 下注册。 -- VuePress 官网
因为使用的 Github Pages 服务，所以即使使用 CNAME 后也依然保持 SSL 状态。
Manifest 第六个视频其实存在一些问题，在第九个 视频 中解决了，利用 App Manifest Generator 直接生成即可。
参考示例：
{
"name": "飞跃高山与大洋的鱼",
"short_name": "山与海",
"description": "飞跃高山与大洋的鱼的文档",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "standalone",
"start_url": "index.html",
"icons": [
{
"src": "/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
复制代码还需要获取一下 favicons 等：
// config/headConf.js
module.exports = [
['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }],
['link', { rel: 'icon', href: '/favicon-32x32.png' }],
['link', { rel: 'manifest', href: '/manifest.json' }],
['meta', { name: 'theme-color', content: '#ffffff' }],
];
复制代码2. 评论（待修改）
评论需要按照你的需求来：如果你希望所有评论可以在 Github 可见，那么使用 Gitalk 吧，正好有一篇新鲜出炉的文章；如果你想要所有非 Github 用户也可以评论的话可以使用 Valine，视频 地址。
这边利用的其实 主题的继承 ，通过修改 VuePress 的默认主题来实现需要的功能，在制作视频的时候官网还没有对这个详细的描述，这次更新发现有了新的介绍，由于时间关系及下一个项目不需要评论所以暂时延期处理：
首先修改默认主题下的 Page 组件（这意味着你不能随便使用 npm install 了）：