GitHub 上有什么好玩又有挑战的前端项目？

推荐22个适合前端学习的开源项目，建议收藏！

1、animate

animate是一个css动画库，动画内容一般也是我们所熟悉的，例如渐入、渐出、弹跳、旋转、抖动等特效。ppt里面的许多特效在animate都能找到。而且使用简单，只需引入库并添加相关css即可。

演示地址：https://animate.style/

GitHub地址：https://github.com/animate-css/animate.css

2、CSS-Inspiration

CSS-Inspiration涵盖了css的许多常见的特效，例如布局方式、border、伪元素、滤镜、背景3d等。这些都是css里面十分重要的知识点，当我们学习完css基础之后，可以利用此项目来制作一些常用的特效，也可以巩固基础知识。

演示地址：https://chokcoco.github.io/CSS-Inspiration/#/

GitHub地址：https://github.com/chokcoco/CSS-Inspiration

3、tesseract.js

一个js ocr识别库，支持包括中英文等许多语言的图片和视频文字识别，底层封装了Tesseract OCR引擎来实现。

视频实时ocr：

demo: http://tesseract.projectnaptha.com

github: https://github.com/naptha/tesseract.js

4、 vanillawebprojects

这里一共包含20+个项目，包括表单验证、音视频播放器、打字等小应用，有趣且方便学习。

github: https://github.com/bradtraversy/vanillawebprojects

5、vue-element-admin

https://github.com/PanJiaChen/vue-element-admin

vue-element-admin是一个后台前端解决方案，它基于vue和element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

相关功能：

- 登录 / 注销

- 权限验证
  - 页面权限
  - 指令权限
  - 权限配置
  - 二步登录

- 多环境发布
  - dev
  - sit
  - stage
  - prod

- 全局功能
  - 国际化多语言
  - 多种动态换肤
  - 动态侧边栏（支持多级路由嵌套）
  - 动态面包屑
  - 快捷导航(标签页)
  - Svg Sprite 图标
  - 本地/后端 mock 数据
  - Screenfull全屏
  - 自适应收缩侧边栏

- 编辑器
  - 富文本
  - Markdown
  - JSON 等多格式

- Excel
  - 导出excel
  - 导入excel
  - 前端可视化excel
  - 导出zip

- 表格
  - 动态表格
  - 拖拽表格
  - 内联编辑

- 错误页面
  - 401
  - 404

- 組件
  - 头像上传
  - 返回顶部
  - 拖拽Dialog
  - 拖拽Select
  - 拖拽看板
  - 列表拖拽
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- 综合实例
- 错误日志
- Dashboard
- 引导页
- ECharts 图表
- Clipboard(剪贴复制)
- Markdown2html

6、carbon

https://github.com/carbon-app/carbon

Carbon 能够轻松地将你的源码生成漂亮的图片并分享。还等什么呢？用这个新发现的美化工具秀给你的 followers 看吧。

7、Swiper

https://github.com/nolimits4web/Swiper

纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

8、每个 JavaScript 工程师都应懂的33个概念

https://github.com/stephentian/33-js-concepts

这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备，但在未来学习（JavaScript）中，可以作为一篇指南。

9、Moment.js

Moment.js 中文网

Moment.js是一个轻量级的js时间处理类库，其使用简单，方便了日常开发中对时间的操作，提高了开发效率。

10、echarts-map-demo

这个开源项目：通过地图 API 获取实时最新的 geojson 数据，摆脱 geojson 文件数据过期的烦恼。省市区县下钻。实现真正的下钻至县级，而不是只到市级。亦可下载最新 geojson 数据。

你看，通过它做的个小工具网站，去下载 geoJson 数据是不是方便了很多呢？

体验地址：https://hxkj.vip/demo/echartsMap/

开源项目地址：https://github.com/TangSY/echarts-map-demo

11、vue-hash-calendar

移动端日期、时间选择插件，日期选择面板以日历形式展示。上下滑动切换周/月模式。

支持两种模式：

月模式，左右滑动切换月份。
周模式，左右滑动切换周。

功能特点：

基于 vue 2.X 开发的日历组件
支持手势滑动操作
原生 js 开发，没引入第三方库
上下滑动切换周 / 月模式，【周模式中】左右滑动可切换上一周 / 下一周【月模式中】左右滑动可切换上一月 / 下一月

总体来讲也还算不错。

感兴趣的同学可以去看看。

开源项目地址：https://github.com/TangSY/vue-hash-calendar

开源项目作者：TangSY

12、前端面试题汇总

https://github.com/Wscats/articles

各大论坛收录的 JavaScript 相关知识和一些相关面试题时所做的笔记，现在分享给大家，希望对 JavaScript 可以来一次全方位的检漏和排查！

13、drawio

https://github.com/jgraph/drawio

一款简洁强大的绘图工具。免费开源可以自行部署也可以在线使用，功能上直追 Microsoft Visio。支持流程图、序列图、网络拓扑图、甘特图、思维导图、模型图等，还能导出多种格式类型比如 png、svg、PDF、HTML 和 VSDX 格式（Microsoft Visio 图形格式）

14、pacman

https://github.com/mumuy/pacman

基于HTML5的吃豆人游戏 – 经典游戏开发样例。

项目演示(DEMO)地址：https://passer-by.com/pacman/

功能

地图绘制
玩家控制
NPC根据玩家坐标实时自动寻径
吃豆积分系统
能量豆功能
多关卡(共12关)
特殊物品记分

15、MarioHTML

https://github.com/nbarkhina/MarioHTML

用 TypeScript 写的马里奥网页游戏。

在线网址：Mario HTML

16、qrcode

https://github.com/tomfriwel/weapp-qrcode

微信小程序生成二维码工具。工具类的小程序在微信搜一搜中流量还是蛮大的

生成二维码数据的主要代码来自davidshimjs/qrcodejs，因为它这个内部生成二维码图片的功能在微信小程序里不能使用，我将这个功能改写成可以在微信小程序中使用。

17、 v2ex

https://github.com/jectychen/wechat-v2ex

V2Ex小程序，V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。

18、餐饮点餐商城

https://gitee.com/woniudiancang/bee

餐饮点餐商城，是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！

19、租房平台类微信小程序

https://gitee.com/LiangSenCheng/house

基于微信小程序云开发的租房平台类微信小程序，带完整的管理员后台。快速完成微信小程序前后端的搭建，后台完全使用微信小程序云开发，不依赖服务器，无需购买服务器即可使用。

参考博客：https://www.cnblogs.com/LiangSenCheng/

20、仿网易云音乐APP的微信小程序

https://github.com/sqaiyan/NeteaseMusicWxMiniApp

已经实现以下功能：

用户、歌单、FM、播放、评论、MV、专辑、歌手、登录、歌曲红心、FM trash、收藏单曲至歌单、收听记录、歌单歌曲推荐、迷你播放条、电台、节目、搜索

21、简约风微信小程序版博客

https://github.com/aquanlerou/WeHalo

配合Halo轻快，简洁，功能强大的博客系统而开发出来的简约风微信小程序版博客

22、 GitHub小程序客户端

https://github.com/huangjianke/Gitter

可能是目前颜值最高的GitHub小程序客户端。

数据来源：https://developer.github.com/v3/

小程序介绍请查看博客：https://juejin.im/post/6844903768388009998

如果你有开源的前端项目，欢迎推荐。持续更新中….

我这推荐12个不仅有趣还很实用的前端项目。

首先推荐一款「H5页面生成器」来镇楼。

H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。类似易企秀的H5制作、建站工具，示范网站： http://www.h5ds.com

H5DS同时也是一款基于react+mobx的在线HTML制作工具，灵活的内核可快速改造成各种可视化制作工具（基于该内核，可以做BI工具，建站工具，图形设计工具，在线PPT工具等一系列工具），H5DS提供了丰富的插件扩展接口，让插件可自由快速扩展和动态加载，同时也支持API接入。

传送门：https://github.com/h5ds/h5ds

点击获取《阿里前端工程师面试手册》，附100G(教程/PDF/PPT)mp.weixin.qq.com/s?__biz=MzUyMzQxODM4MA==&mid=100004198&idx=3&sn=84df89c29865e9fae3f0f779001ce3fe&chksm=7a3dbf054d4a361347dd22d5f0076d69734a111606ad84557d6595a165e73695668c4f14dae1#rd

其他11款也不错，如下：

1. reveal.js: 幻灯片展示框架

一个专门用来做 HTML 幻灯片的框架，支持 HTML 和 Markdown 语法。

github: https://github.com/hakimel/reveal.js
demo: https://revealjs.com

动图取自博客 reveal.js – 程序员的PPT制作神器。

2. impress.js: 又一个幻灯片展示框架

一个受 https://prezi.com/ 的启发，使用了现代浏览器里支持的 CSS3 transforms 和 transitions 的特效幻灯片。

我的个人网站首页 https://www.senntyou.com/ 也是用 impress.js 开发的。

github: https://github.com/impress/impress.js
demo: https://impress.js.org/

3. particles.js: 超棒的粒子效果

github: https://github.com/VincentGarreau/particles.js
demo: https://vincentgarreau.com/particles.js/

4. carbon: 代码美图生成器

可以将你的代码生成美美的图片，然后你就可以分享到各个社区了。

github: https://github.com/dawnlabs/carbon
demo: https://dawnlabs.io/carbon

5. favico.js: 让你的 favicon 用上胶囊图标、图片和视频

github: https://github.com/ejci/favico.js
demo: http://lab.ejci.net/favico.js/

6. typed.js: 打字机效果库

github: https://github.com/mattboldt/typed.js
demo: https://mattboldt.com/demos/typed-js/

7. vConsole: 移动端开发调试利器

vConsole：一个轻量、可拓展、针对手机网页的前端开发者调试面板（chrome 开发者工具的便利实现）。

一般在 web 应用开发过程中，可以用 console.log 去输出一些信息，但是在移动端，console.log 的信息是看不到的。

这种情况下，当然可以选择使用 alert 弹出一些信息，但是这种方法实在不怎么方便，也会阻断 js 事件循环，调试体验和效率都很差。

好在有 vConsole 可以帮助我们解决这个问题。

github: https://github.com/Tencent/vConsole
demo: https://wechatfe.github.io/vconsole/demo.html

8. midnight.js: 固定头部炫酷效果

github: https://github.com/Aerolab/midnight.js
demo: https://aerolab.github.io/midnight.js/

9. multiscroll.js: 多边滑动效果

github: https://github.com/alvarotrigo/multiscroll.js
demo: https://alvarotrigo.com/multiScroll/

10. diaporama: Kenburns 效果与 glsl 转换动画库

github: https://github.com/gre/diaporama
demo: http://greweb.me/diaporama/

11. RainEffect: 雨滴效果

github: https://github.com/codrops/RainEffect
demo: https://tympanus.net/Development/RainEffect/

不管是不是科班出身，每一个程序员都应该花时间了解和学习计算机科学相关的基础知识，因为所有关于如何编程的底层逻辑和原理都在那里了。

这里有4本手册，全网累积下载100w次，几乎程序员人手一套，包含数据结构与算法、操作系统、计算机组成原理、计算机网络等硬核基础知识，图文+实战案例，平时开发+搞定面试，帮你快速建立对计算机科学的大局观，夯实计算机基本功，瞬间起飞～

全网累计下载100w+次，瞬间让你起飞的计算机基础知识mp.weixin.qq.com/s?__biz=MzUyMzQxODM4MA==&mid=100004198&idx=2&sn=b7cf7d9455b2fa56d03f5495a03703a5&chksm=7a3dbf054d4a36130b1b489de709ed6a527fb177575d2664fba970547ec5b2f23d77c20496e6#rd

祝大家玩的愉快，要是觉得不错的话，那就帮我

点个赞哈，码字不易，ღ( ´･ᴗ･` )比心！

推荐 9 个前端开发者练手项目！！！

这些项目都是基于 Vue.js 前端框架，都是基于 Vue.js 开发点赞最靠前的项目。

相比于其他前端框架，Vue 更加易学。尤其在中国，Vue 可以说是前端开发者必会的框架，在 GitHub 上基于 Vue 开源的优质项目也是数不胜数，今天我们就盘点 GitHub 上受欢迎的 9 个开源项目。

1. 美观的后台模板 (Star: 67.1K)

地址：https : //http://github.com/PanJiaChen/vue-element-admin

Vue Element Admin 堪称接私活利器，是一个组件丰富的前端页面模板。它基于 Vue 和 Element UI 开发，有许多功能，例如登录/注销、权限认证、表、可视化组件等等，这些功能都是直接可用的，既美观又方便。

2. Awesome Vue.js (Star：60.2k)

地址：https://github.com/vuejs/awesome-vue

如果你打算学习 Vue，找一些 Vue 的学习资料、或者示例，这个 GitHub 项目不能错过。

该项目是由 Vue.js 创建和维护的，包含一系列的 Vue.js 的精选内容，对于刚学习 Vue 的小白或者进阶老手，这个项目都是很适合的，这里面涵盖了大量的内容，因此很值得去看一看。

3. Element （Star：49.9k）

地址：https://github.com/ElemeFE/element

Element UI 是一套为开发者、设计师和产品经理准备的开源组件库，旨在快速搭建页面，基于 Vue 2 构建，非常棒的 UI 工具包。

4. Hoppscotch （Star：28.8k）

地址：https://github.com/hoppscotch/hoppscotch

Hoppscotch：帮助你更快地创建请求，节省开发时间，早下班。Hoppscotch 除了支持 REST API 外，它还支持 GraphQL。它还可以为你的 API 生成文档。

5. best-resume-ever (Star：14.6k)

地址：https://github.com/salomonelli/best-resume-ever

这个是一个简历项目，几行代码助你快速构建美观的简历，它支持使用 Vue 和 LESS 构建的各种模板。你可以在本地预览自己的简历，还可以在模板之间随意切换，方便选择合适自己的简历。

6. 另一个后台模板 (Star：3.6k)

地址：https://github.com/Armour/vue-typescript-admin-template

和第一个项目非常类似，也是非常美观的模板，功能也相似，不同的是这套模板具有 TypeScript 支持。

7. iHateRegex (Star：2.8k)

地址：https://github.com/geongeorge/i-hate-regex

正则表达式的可视化表示，你可以在“测试”区域中使用字符串测试正则表达式，并将可视化效果嵌入到你的站点中去，比如用户名、邮箱、日期、电话等，你只需要键入类型，它就会返回给你对应的表达式和演示字符。

8. 优雅的 Markdown 编辑器