前言

大家好,我是webfansplz.明天要跟大家分享的是vuejs-challenges,一个Vue.js在线挑战平台,它提供了一些题库,开发者能够在线进行挑战.通过这些挑战,咱们能够进一步理解和相熟Vue.js,心愿它能对想学习Vue.js的同学有所帮忙.

背景

间隔Vue 3.0公布曾经快两年了,Vue 2.0也在上周五迎来了它的最初一个版本Vue 2.7,周五难道不应该有周五的态度吗...好吧,那我就周末再Juan起来~
Vue3正式版公布快两年了,笔者接触Vue3也快两年了 (两年前一个我的项目的重构搭上 "One Piece"的首班车).这段时间的实际积淀了一些教训,前段时间我就在想,有没有可能有这样一个平台,大家能够分享本人在工作中遇到的一些Vue.js难题,又能够通过他人分享的教训受害.在帮忙他人的时候,本人也能有播种,那就太棒了.这也就是vuejs-challenges诞生的由来,心愿咱们能够在这里互相分享,独特成长.

介绍

接下来跟大家介绍一下vuejs-challenges :

题库

vuejs-challenges目前有20多道题目,题库次要分为两个维度:

  • 难度

    难度蕴含热身/简略/中等/艰难/天堂.挑战者能够依据本身状况/需要抉择不同的难度进行阶段性的练习.

  • 标签
    标签笼罩了响应式零碎API的考查,组合式API的利用以及自定义指令,可组合函数的应用等.挑战者能够筛选本人比拟生疏/不相熟的模块进行针对性的练习.

题库才刚建设不久(还在继续补充中),然而一个人的精力和遇到的应用场景是无限的,我想我须要站在伟人的肩膀上,借着大家的帮忙,一起来欠缺它,为了让大家能疾速简略的奉献题库,vuejs-challenges提供了一套自动化能力.前面咱们再来具体介绍它.

挑战形式

vuejs-challenges应用Vue SFC Playground进行在线编码,挑战者无需任何的装置和下载便可开启挑战,并且实时调试和预览.

参加奉献

众所皆知,一个开源我的项目的成长离不开社区开发者的奉献,vuejs-challenges也是如此,大家有以下几种形式能够参加奉献:

  • 欠缺已有题目的测试用例
  • 提供针对题目的学习材料或办法
  • 分享你在实在我的项目中遇到的Vue.js问题（无论你找到答案与否）
  • 通过在 Issue 下留言帮忙别人
  • 分享你的答案或解题思路
  • 提案退出新的题目

解法分享

我的项目提供了相应的Issue模版,分享人只有抉择模版并提供解法,其余挑战者在检索解决方案的时候就能够查找到了.

提案退出新的题目

我的项目同样针对新题目提案提供了Issue模版,开发者只须要依据Issue模版提供的内容精确填充信息,一个新提案的PR就会被主动生成.这样开发者就不必浏览我的项目自身的代码并且相熟合作流程和标准,大大降低了奉献新提案的老本.

文档

我的项目除了基于Github README提供了题库列表,咱们还应用VitePress和Netlify部署了文档,提供给挑战者多一种抉择.


顺带一提,VitePress的新版文档是真的帅:

原理

看完了我的项目的介绍,置信有些同学会对它的实现原理感兴趣,接下来咱们就来一探到底,咱们次要分享以下3点:

在线挑战链接是如何生成的 ?

后面咱们提到了在线挑战是基于Vue SFC Playground进行的,好,那咱们就来看看它的源码.

从上图中咱们能够看到Vue SFC Playground的外围其实是在vuejs/repl实现的.一句话简略介绍一下它,vuejs/repl是一个用来解析Vue3单文件组件的交互式解释器.

咱们回归到需要自身,咱们的需要其实就是将题目转化为在线Playground链接.这个需要能够拆解为两个性能:

    1. 读取题目内容

      这个简略,对于精通应用Node.js File System API来CRUD的我天然不在话下 .

    1. 题目内容转化为链接

      获取到了文件内容,那咱们要怎么将它传递给Playground呢 ? 咱们先来看一张图:

通过上图咱们看到,链接的hash值随着咱们的输出在变动,这就能够确认咱们的需要可行性是OK的,接下来咱们还是须要去看下vuejs/repl的源码,明确它接管的参数格局.这块的源码逻辑略微有点扩散,就不带大家漫游源码了.vuejs/repl须要提供的链接格局大抵如下:

const content = { [文件名]: 文件内容}const url = `${SFC_HOST}#${编码(content)}`

vuejs/repl接管到参数后再进行解码并创立对应的文件,这便是整个流程的原理了.

新提案提交的Issue是如何主动生成PR的 ?

这个性能的外围其实就是Github Actions,它是Github在2018年10月推出的一个CI/CD服务.简略来说就是Github为你提供了一些钩子和API,能让你创立你的工作流,做到自动化构建,测试,部署等.Github Actions的灵活性很高,十分好用,它的呈现更是为很多开源我的项目的维护者节约了很多工夫和精力.接下来咱们简略介绍一下这个流程:

  • 创立工作流:
# .github/workflows/issue-pr.yaml# 工作流名称name: Issue to Pull Request# 钩子,监听到issue创立和批改,调用此工作流on:  issues:    types: [opened, edited]# 具体逻辑jobs:  start:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v2      - run: cd scripts && npm i --only=production      # 具体逻辑解决      - run: cd scripts/actions && npx ...
  • 解析Issue内容并转换为题库的内容

这块的原理其实就是通过正则来匹配相应的模块内容并转化为创立题库所须要的文件内容就能够了,众所皆知,能用JavaScript实现的最终...你懂的.

  • 提交PR

这个其实就是一个HTTP申请的事件,可详见Create a pull request.

以上就是Issue转PR的工作原理.

如何构建题库文档 ?

后面咱们提到了文档应用了VitePress和Netlify进行构建,这里次要介绍它们.

VitePress介绍

文档的实现咱们次要利用了VitePress约定式路由的特点及Markdown解析的能力.

利用VitePress人造反对的这两个能力,咱们就能够很容易的找到题库与之的对应关系和文档的出现.

Netlify

The fastest way to build the fastest sites (用最快的形式构建最快的网站)是Netlify的宣传语.是的,你要做的事件只有一个,就是将Github我的项目与它关联,进行受权.在此之后,一切都是主动的. 最重要的是,它收费 ! 害,真香 ! 对我这个懒人来说,Netlify就是构建网站的神器.

致谢

这个我的项目的灵感和实现大多来自于 Anthony Fu 的 type-challenges .

尤大的 vuejs/repl 让这个我的项目成为了可能 ♥️.

结语

文章到这里就完结了,但挑战才刚刚开始.vuejs-challenges 期待你的挑战和奉献 .

如果我的文章和我的项目对你有所启发和帮忙,请给一个star反对作者 ✌.