百家饭团队开发的百家饭OpenAPI平台是用vuepress2.0搭建的,搭建的时候不知道2.0还处在beta状态,所以导致后来踩了一些坑,使用过程中vuepress2.0也从2.0.0-beta.18升到了2.0.0-beta.48,有很多的变化,所以想写一个教程介绍一下vuepress2.0的情况以及使用经验。
大致计划写这些内容吧:
- vuepress介绍、选型原因及使用感受(先介绍一下自己用的情况吧)
- vuepress2.0使用(搭建一个vuepress支撑的网站)-第一部分
- vuepress2.0使用(搭建一个vuepress支撑的网站)-修改默认模板配置
- vuepress2.0使用(搭建一个vuepress支撑的网站)-详细配置默认模板
- vuepress2.0使用(搭建一个vuepress支撑的网站)-md文件的玩法
- vuepress2.0使用(扩展默认主题)- 准备及扩展页面组件
- vuepress2.0使用(扩展默认主题)- 提供更多页面模板并引入ElementUI
- vuepress2.0使用(扩展默认主题)- 扩展MD页面功能(Section扩展及自定义语法)
- vuepress2.0使用(扩展默认主题)- 引入百度搜索支持及其他库的引用
- 编写vuepress主题(自定义自己的框架,开发复杂程序)
- vuepress2.0使用——编译及站点部署
- vuepress2.0当前的状态(版本变化,方便大家升级,占位中,未书写)
- 更多读者发起话题点击这里进专题查看,就不更新标题了
这里先给搜索进来的同学提个醒:凡是网上搜索到需要修改clientAppEnhance.js 文件的教程都已经过时,最新版本已不再使用。另外说个题外话,我查了下,我为数不多的搜索关键词里面,vuepress的占了大部分,这里感谢大家的关注,这个教程肯定有不合理的地方,如果有任何需要帮助的,大家都可以留言,我尽力解答。
vuepress介绍
VuePress 是一个以Markdown 为中心的静态网站生成器。 你可以使用Markdown 来书写内容(如文档、博客等),然后VuePress 会帮助你生成一个静态网站来展示它们。
上面是官网上的介绍哈,也就是说vuepress不是一个做SPA(单页面应用)的框架,通常用于静态网站建设,为什么要做静态网站建设?通常是为了搜索流量,特别是内容网站,机器依靠搜索引擎做导流,因此,我们为了建设一个内容导向的网站时,通常需要这么个工具。
备选方案及选型原因
选型的时候参考了react的一些框架和nuxt,react我们用的比较少,所以没有选择,nuxt的话,说起来可以做同样的事情,但是看了下文档,觉得nuxt的复杂性更高,而且vuepress有开箱即用的模板,快速成站的能力更强,所以选择了vuepress。
同时,因为vuepress官方网站并没有明确介绍vuepress2.0 beta到什么程度,我们怀着一腔对新技术的热情进去的,如果有大型网站需求,我还是建议选稳定点的版本,要不面临两个问题:
1)框架变化大,而且频繁
2)资料不好查找,很多网上的资料不是只针对1.0版本,就是过时有错
使用感受
总的来说,满足了我们建立一个内容导向,内嵌部分功能网站的一个建设目标吧。功能上应该还是合格的,基本等同于使用vue3.0进行单页面应用的开发体验。但是其中有两点特别麻烦:
1)处理SSR问题。
2)处理生命周期问题(和单页面应用有不同)
我们慢慢的在后续展开来讲这些问题