前言
文档内容不多,就花半天时间翻译了一下,比较匆忙,有一些不是很理解的地方翻译的不是很通顺甚至有错误,欢迎大家指正。VuePress 中文
个人觉得最大的亮点就是:
- VuePress 文档是用 VuePress 写的
- markdown 文件可以内嵌 Vue 组件
- 借助 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 官方其实也在考虑这件事情,只不过要任重道远~
网友评论