社区精选 | 叮~您有一封 Vue.js 挑战邀请函,请查收-技术圈

今天为各位推荐的是社区作者 null仔 的文章，在这篇文章中他为大家介绍了一个 Vue.js 在线挑战平台 vuejs-challenges，希望能助力同学们学习 Vue.js。

让我们一起来看看吧！

前言

大家好,我是 webfansplz.今天要跟大家分享的是 vuejs-challenges,一个 Vue.js 在线挑战平台,它提供了一些题库,开发者可以在线进行挑战.通过这些挑战,我们可以进一步了解和熟悉 Vue.js,希望它能对想学习 Vue.js 的同学有所帮助.

GitHub主页：

https://github.com/webfansplz

项目地址：

https://github.com/webfansplz/vuejs-challenges

背景

距离 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 单文件组件的交互式解释器.

项目地址：

https://github.com/vuejs/repl

我们回归到需求本身,我们的需求其实就是将题目转化为在线 Playground 链接.这个需求可以拆解为两个功能:

读取题目内容
这个简单,对于精通使用 Node.js File System API 来 CRUD 的我自然不在话下 🐶.

题目内容转化为链接
获取到了文件内容,那我们要怎么将它传递给 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.

文档地址：

https://docs.github.com/cn/rest/pulls/pulls#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 让这个项目成为了可能 ♥️.

GitHub 主页：

https://github.com/antfu

项目主页：

https://github.com/type-challenges/type-challenges

结语

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

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

SegmentFault 思否社区小编说

自 2022-07-01 起 SegmentFault 思否公众号改版啦！之后将陆续推出新的栏目和大家见面！（请拭目以待呀~❤）

在「社区精选」栏目中，我们将为广大开发者推荐来自 SegmentFault 思否开发者社区的优质技术文章，这些文章全部出自社区中充满智慧的技术创作者哦!

希望通过这一栏目，大家可以共同学习技术干货，GET 新技能和各种花式技术小 Tips。

欢迎越来越多的开发者加入创作者的行列，我们将持续甄选出社区中优质的内容推介给更多人，让闪闪发光的技术创作者们走到聚光灯下，被更多人认识。

「社区精选」投稿邮箱：pr@segmentfault.com

投稿请附上社区文章地址

点击左下角阅读原文，到 SegmentFault 思否社区 和文章作者展开更多互动和交流，“公众号后台“回复“ 入群 ”即可加入我们的技术交流群，收获更多的技术文章~

- END -