前言
大家好,我是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链接.这个需求可以拆解为两个功能:
- 这个简单,对于精通使用
Node.js File System API来CRUD的我自然不在话下
