初探 VuePress

作者: 云峰yf | 来源:发表于2018-04-16 00:40 被阅读0次

    前言

    文档内容不多,就花半天时间翻译了一下,比较匆忙,有一些不是很理解的地方翻译的不是很通顺甚至有错误,欢迎大家指正。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 官方其实也在考虑这件事情,只不过要任重道远~

    相关文章

      网友评论

        本文标题:初探 VuePress

        本文链接:https://www.haomeiwen.com/subject/mdwjkftx.html