初探 VuePress

前言

文档内容不多,就花半天时间翻译了一下,比较匆忙,有一些不是很理解的地方翻译的不是很通顺甚至有错误,欢迎大家指正。VuePress 中文

个人觉得最大的亮点就是:

  1. VuePress 文档是用 VuePress 写的
  2. markdown 文件可以内嵌 Vue 组件
  3. 借助 YAML 来作为驱动和配置文档
    ...

自己写自己的文档

今天一友人逛掘金的时候发现了这个好东西,遂推荐给我。


抱着玩一玩的心态,我就装了一个,反正不要钱,哈哈~

可是谁知道不玩不要紧,一玩就吃了闭门羹:


玩个屁

这我就不服气了,所以赶紧去 github 上提了个 issue,结果这破问题占据了 issue 榜上一整天,评论数还最多,最后的原因也找到了:Win10 的 Powershell 的锅。

不过当时我不知道啊,看这报错像是库本身有个地方出错了。出于猎奇的心,我 clone 了一份源码正准备调试...

咦,它这个 docs 文件夹?貌似就是一份 VuePress 的例子:


VuePress docs

要不?在这文件下跑一个 vuepress dev 命令试试?诶!还真跑起来了!

不过新的问题又随之而来:


侧边栏白屏

这真是让人头大,不过幸好现在也被尤大修复了:issue34

所以,我就抛弃了全局从 npm 拉下的包,转而用项目本身最新的代码来跑这份文档。


成功跑起

一切皆组件

文档里隐藏着一个惊天大秘密:


强大功能

目前 VuePress 支持的三种格式 html、md、vue 实际上最后都会转成 vue 组件!

也就是说形成了一个 markdown->html->vue 的管道。

小试牛刀

基于这个我最感兴趣的点,我做了一个小组件来体验一下:代码编辑组件。

很多时候,我们为了那么一两个功能或者 API 不得不重新拉个项目、装 npm 包,然后漫长的时光渡过了,环境配好,却已忘记自己要干啥。

所以,简单点,像 echarts 或者 G2 那样,在线调试,所见即所得,多好~

不过最终还是搞出个 demo:


demo

大家也看到了,还有很明显的 bug:不知道为啥被替换成繁字体聽的空格君,所以丢人的代码就先不放出来了...

YAML

就拿我刚刚实现的那个在线调试小组件来说,用的时候 markdown 文件里只需要这样写:

<CodeEditor :code="$page.frontmatter.code"/>

这个 $page.frontmatter.code 自然就是 markdown 里面定义的变量了,它使用的是 YAML 语法

JSON 原来是 YAML 的子集呢!

其他功能

VuePress 还有很多很棒的功能,比如一键部署(集成 git)、Algolia DocSearch 集成(借助 SSR 对 SEO 友好)等也是可圈可点的。只不过今天来不及玩了。

展望

今天的翻译也引起了我对文档国际化的思考,Vue 官方其实也在考虑这件事情,只不过要任重道远~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,925评论 25 709
  • 本文为2016年11月9日,『前端之巅』微信群在线分享活动总结整理而成,转载请在文章开头处注明来自『前端之巅』公众...
    尾尾阅读 10,739评论 3 32
  • 耀眼星辰归于孤傲夜空 璀璨如斯,终归惨淡; 坚韧磐石归于无际大海 荡起波纹,终归沉底; 诸多琐事归于坚定...
    time有点坏阅读 248评论 0 1
  • 1. 今年母亲节的时候,我送了一个一千多元的智能手机给妈妈当礼物,那个她用了七、八年的按键手机被我强行淘汰了。 刚...
    苏小鹿lu阅读 2,728评论 45 85
  • 第一篇简书 还不是很清楚 简书的编写规范 作为iOS开发工程师,第一眼就喜欢上了简书,美观大方简洁 当然,以后写代...
    愁死我了阅读 227评论 0 0