推荐一个GitHub最全的前端资源汇总仓库
包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等!
前端趋势榜
- 影响了一代代前端人的 20 个里程碑式的顶级开源项目!
- 1534K Star!排名前十的 10 大前端顶级开源项目!
- 猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!
- 前端最流行的 10 大顶级开源项目!猛增 174K Star!
- 前端月趋势榜:5 月最热门的 20 个前端开源项目 - 又增加了那么多个好的开源项目! - 2105
- 前端月趋势榜:4 月最热门的 20 个前端开源项目 - 又增加了那么多个好的开源项目!- 2104
- Web 趋势榜:上周最有意思、最热门的 10 大 Web 项目 - 210625
- Web 趋势榜:上周最热门的 10 大 Web 项目 - 210410
- 前端趋势榜:上周最热门的 10 大前端项目 - 210327
Vue3
项目 | 地址 |
---|---|
Vue3 中文文档 | https://vue3js.cn/docs/zh/ |
Vue3 设计理念 | https://vue3js.cn/vue-composition/ |
Vue3 相关项目聚合网站 | https://vue3js.cn/ |
Vue3 源码 | https://vue3js.cn/start/ |
Ant-design-vue | https://antdv.com/docs/vue/introduce-cn/ |
Vant 3.0 | https://vant-contrib.gitee.io/vant/v3/ |
Element-plus | https://element-plus.org/#/zh-CN |
element 3 | https://github.com/hug-sun/element3 |
vue-vben-admin | https://github.com/anncwb/vue-vben-admin |
vue-admin-beautiful | https://github.com/chuzhixin/vue-admin-beautiful |
vue-cli | https://github.com/Wscats/vue-cli |
movie-trailer | https://github.com/lhz960904/movie-trailer |
newbee-mall-vue3-app | https://github.com/newbee-ltd/newbee-mall-vue3-app |
vue3-jd-h5 | https://github.com/GitHubGanKai/vue3-jd-h5 |
Vue 源码解密
- 推荐 7 个 Vue2、Vue3 源码解密分析的开源项目
- 精彩待续。。。
项目 | 地址 |
---|---|
vue-analysis:Vue.js 源码分析 | https://github.com/ustbhuangyi/vue-analysis |
vue-design:逐行级别的分析 | http://hcysun.me/vue-design/zh/ |
vue-family-mindmap:用一张思维导图总结了 Vue | Vue-Router |
learnVue:Vue.js 源码分析 | https://github.com/answershuto/learnVue |
vue:Vue 源码逐行注释分析 | https://github.com/qq281113270/vue |
vue2.0-source:Vue 源码分析 | https://github.com/liutao/vue2.0-source |
Vue3 源码:Vue3 源码系列 | https://vue3js.cn/start/ |
React 源码解密
项目 | 地址 |
---|---|
just-react:严谨、易懂的 React 源码分析教程 | https://github.com/BetaSu/just-react |
面试专题
项目 | 地址 |
---|---|
Front-end-Developer-Questions:前端面试题 | https://h5bp.org/Front-end-Developer-Interview-Questions/ |
javascript-questions:JavaScript 进阶问题列表 | https://github.com/lydiahallie/javascript-questions |
Daily-Question:每天一道大厂面经推送 | https://github.com/shfshanyue/Daily-Question |
CS-Interview-Knowledge-Map:一线大厂面试题 | https://github.com/InterviewMap/CS-Interview-Knowledge-Map |
Daily-Interview-Question:每天搞定一道前端大厂面试题 | https://github.com/Advanced-Frontend/Daily-Interview-Question |
fe-interview:前端面试的一个复习汇总项目 | https://lucifer.ren/fe-interview |
fe-interview:前端面试专题 | https://github.com/biaochenxuying/blog/blob/master/interview/fe-interview.md |
fe-interview:前端知识题库 | https://github.com/haizlin/fe-interview |
node-interview:饿了么大前端的面试 | https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn |
Front-End-Interview-Notebook:前端复习笔记 | https://github.com/CavsZhouyou/Front-End-Interview-Notebook |
FE-Interview:前端面试必备题库 | https://github.com/lgwebdream/FE-Interview |
web-interview:Vue 面试题库 | https://github.com/febobo/web-interview |
简历专题
项目 | 地址 |
---|---|
ResumeSample:程序员简历模板系列 | https://github.com/geekcompany/ResumeSample |
Markdown-Resume:用 markdown 语法来写的简历模版,非常简结通用 | https://github.com/CyC2018/Markdown-Resume |
awesome-resume:程序员简历例句,程序员简历范例 | https://github.com/resumejob/awesome-resume |
DeerResume:好用的 MarkDown 在线简历工具,可在线预览、编辑、设置访问密码和生成 PDF | https://github.com/geekcompany/DeerResume |
markdown-resume:在线简历排版工具,支持切换 4 种模版、自定义和导出功能 | https://github.com/mdnice/markdown-resume |
best-resume-ever:快速生成漂亮简历的工具,它基于 Vue 和 LESS | https://github.com/salomonelli/best-resume-ever |
awesome-resume-for-chinese:适合中文的简历模板收集 | https://github.com/dyweb/awesome-resume-for-chinese |
resume:一份优雅简约的简历 | https://github.com/gwuhaolin/resume |
biaochenxuying:非常自由的自定义的前端程序员模版 | https://github.com/biaochenxuying/blog/blob/master/resume/resume.md |
github-readme-stats:在你的 README 中获取动态生成的 GitHub 统计信息 | https://github.com/anuraghazra/github-readme-stats |
JavaScript
项目 | 地址 |
---|---|
30-seconds-of-code:简短代码段,经常会用到而且是非常经典的代码 | https://github.com/30-seconds/30-seconds-of-code |
33-js-concepts:JavaScript开发者应懂的 33 个概念 | https://github.com/leonardomso/33-js-concepts |
javascript-questions:JavaScript 进阶问题列表 | https://github.com/lydiahallie/javascript-questions |
JavaScript 30:使用原生 JavaScript 在 30 天内完成 30 个项目 | https://github.com/wesbos/JavaScript30 |
Codewars:和 leetcode 有点类似,也是在平台上和其他人一起完成真实的代码挑战,提升你的技术 | https://www.codewars.com/ |
ES6 入门教程:开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性 | https://es6.ruanyifeng.com/ |
JavaScript 教程:全面介绍 JavaScript 核心语法,覆盖了 ES5 和 DOM 规范的所有内容 | https://wangdoc.com/javascript/ |
现代 JavaScript 教程:以最新的 JavaScript 标准为基准。从基础到高阶的 JavaScript 相关知识 | https://zh.javascript.info/ |
MDN:提供开放网络(Open Web)技术有关的信息,包括用于网站和渐进式网络应用的 HTML、CSS 和 API | https://developer.mozilla.org/zh-CN/ |
clean-code-javascript:优秀的 JS 代码规范 | https://github.com/ryanmcdermott/clean-code-javascript |
TypeScript 入门教程:从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript | https://ts.xcatliu.com |
w3school:前端必须知道的 Web 技术教程平台 | https://www.w3school.com.cn/js/index.asp |
three.js:JavaScript编辑3D模型,各种各样炫酷的效果以及Documentation值得你去了解three.js | three.js](https://threejs.org/) |
Flutter
- 推荐 4 个基于 Flutter 的重磅高仿开源项目
- 精彩待续。。。
网站 | 说明 |
---|---|
dy_flutter | 斗鱼 APP |
flutter_tiktok | 精仿抖音 |
flutter-osc | 开源中国客户端 |
FlutterDouBan | 豆瓣客户端 |
TypeScript
网站 | 说明 |
---|---|
TypeScript | TypeScript 官网,TS 扩展了 JavaScript ,为它添加了类型支持 |
typescript-tutorial | TypeScript 入门教程,循序渐进的理解 TypeScript |
TypeScript | TypeScript 使用手册 |
typescript-book-chinese | 深入理解 TypeScript |
clean-code-typescript | 适用于TypeScript的简洁代码概念 |
TypeScript入门 | TypeScript 入门的视频教程 |
typescript-tutorial | TypeScript 速成教程(2小时速成) |
前端必备在线工具
项目 | 地址 |
---|---|
LightHouse:一个开源的自动化工具,用于改进网络应用的质量 | https://github.com/GoogleChrome/lighthouse |
Can I Use:查询 CSS、Js 在个中流行浏览器钟的特性和兼容性的网站 | https://caniuse.com/ |
ios font:IOS 字体支持查询和 IOS 系统自带字体查询 | http://iosfonts.com/ |
web 安全色:尽量让用户看到色彩相同的网页,请尽量使用 216 色的 web 安全色 | https://www.bootcss.com/p/websafecolors/ |
TinyPNG:PNG/JPG 图片在线压缩利器,智能 PNG 和 JPEG 图片压缩 | https://tinypng.com/ |
二维码生成器:草料二维码生成器 | https://cli.im/ |
Shape Divider:定制各种形状的网站分区 SVG 的工具 | https://www.shapedivider.app/ |
json 格式化: json 在线解析的网站 | http://json.cn/ |
sojson:前端WEB工具大合集 | https://www.sojson.com/ |
站长工具:站长的必备工具 | https://tool.chinaz.com/ |
codelf:变量命名智能推荐(支持中文) | https://unbug.github.io/codelf/ |
印象笔记:Web 前端开发人员提供优质中文文档 | https://www.docschina.org |
regexr:正则表达式验证匹配 | https://regexr.com/ |
any-rule:正则表达式库,非常全,使用起来很方便 | https://github.com/any86/any-rule |
bootcdn:国内的CDN库,速度快 | http://www.bootcdn.cn 或 http://cdn.baomitu.com |
jsdelivr:国外的 cdn 库,支持 github,npm,WordPress | https://www.jsdelivr.com |
gitignore:根据选择会去生成 .gitignore 文件 | https://www.gitignore.io/ |
codesandbox:在线编辑代码 | https://codesandbox.io/ |
typora:实用的 Markdown 写作工具,所见即所得 | https://www.typora.io |
mdnice:使 markdown 语法更加美观,写作工具(强烈推荐) | https://mdnice.com |
toptal:多张图片合成雪碧图,并生成对应 css | https://www.toptal.com/developers/css/sprite-generator |
tool:众多工具集合,包括时间戳转换,进制转换等 | https://tool.lu/ |
计算机内功秘籍
项目 | 地址 |
---|---|
Crash-Course-Computer-Science-Chinese:计算机科学速成课 | https://github.com/1c7/Crash-Course-Computer-Science-Chinese |
computer-science:通往计算机科学免费自学教育之路! | https://github.com/ossu/computer-science |
CS-Notes:技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络、系统设计、Java、Python、C++ | https://github.com/CyC2018/CS-Notes |
REKCARC-TSC-UHT:清华大学计算机系课程攻略 | https://github.com/PKUanonym/REKCARC-TSC-UHT |
zju-icicles:浙江大学课程攻略共享计划 | https://github.com/QSCTech/zju-icicles |
TeachYourselfCS-CN:仅仅依靠自己,你就可以获得世界一流水平的教育 | https://github.com/keithnull/TeachYourselfCS-CN |
CS-Xmind-Note:计算机专业课(408)思维导图和笔记 | https://github.com/SSHeRun/CS-Xmind-Note |
awesome-books:160+ 本开源技术类精华电子书,包括 前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍 | https://github.com/biaochenxuying/awesome-books |
在线的代码转图片
项目 | 地址 |
---|---|
Carbon:在线的代码转图片工具 | https://carbon.now.sh/ |
glorious.codes:在线的代码转图片工具 | https://glorious.codes/demo |
codezen:在线的代码转图片工具 | http://codezen.rishimohan.me/ |
codeimg:在线的代码转图片工具 | https://codeimg.io/ |
管理后台 admin
项目 | 地址 |
---|---|
vue-Element-Admin:后台前端解决方案,它基于 vue 和 element-ui 实现 | https://github.com/PanJiaChen/vue-element-admin |
iview-admin:基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解决方案 | https://github.com/iview/iview-admin |
vue-admin-template:极简的 vue admin 管理后台 | https://github.com/PanJiaChen/vue-admin-template |
ant-design-pro:Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案 | https://github.com/ant-design/ant-design-pro |
ngx-admin:基于Angular 10+ 的可定制管理仪表板模,还拥有 6 个惊人的视觉主题 | https://github.com/akveo/ngx-admin |
vue-admin-beautiful:基于 vue+element-ui 的绝佳的中后台前端开发管理框架 | https://github.com/chuzhixin/vue-admin-beautiful |
vuestic-admin:免费与美妙 Vue.js 管理模板,包括 38 以上个定制用户界面组件 | https://github.com/epicmaxco/vuestic-admin |
antd-admin:一套优秀的中后台前端解决方案 | https://github.com/zuiidea/antd-admin |
eladmin:SpringBoot、Jpa、Security、Redis、Vue 等前后端前沿技术开发 | https://github.com/elunez/eladmin |
AdminLTE:是一个完全响应的管理模板。基于 Bootstrap 4.5 框架以及 JS / jQuery 插件 | https://github.com/almasaeed2010/AdminLTE |
逼格满满的 PPT
项目 | 地址 |
---|---|
reveal-md:使用 Markdown 来做 PPT 展示的开源项目 | https://github.com/webpro/reveal-md |
reveal.js:使用 html、markdown 写静态的文本,创建功能齐全且美观的 PPT | https://github.com/hakimel/reveal.js |
数据结构与算法
项目 | 地址 |
---|---|
javascript-algorithms:含了多种基于 JavaScript 的算法与数据结构 | https://github.com/trekhleb/javascript-algorithms |
algorithm-visualizer:算法可视化工具是一个交互式的在线平台,可以从代码中可视化算法 | https://github.com/algorithm-visualizer/algorithm-visualizer |
algo:数据结构和算法必知必会的 50 个代码实现 | https://github.com/wangzheng0822/algo |
awesome-algorithms:包含不同著名计算机科学算法的 javascript 实现 | https://github.com/mgechev/javascript-algorithms |
JS-Sorting-Algorithm:关于排序算法的 GitBook 在线书籍 《十大经典排序算法》 | https://github.com/hustcc/JS-Sorting-Algorithm |
JavaScript 数据结构与算法之美:包含了 十大经典排序算法 的思想、代码实现、一些例子、复杂度分析、动画 | https://github.com/biaochenxuying/blog |
daily-algorithms:算法,每日练习的一个项目 | https://github.com/barretlee/daily-algorithms |
JavaScript 更多 ... | https://github.com/search?l=JavaScript&o=desc&q=algo&s=stars&type=Repositories |
CSS 学习专题
项目 | 地址 |
---|---|
You-need-to-know-css: CSS 的各种效果实现,尤其是动画效果 | https://lhammer.cn/You-need-to-know-css/#/zh-cn/ |
CSS-Inspiration:找到使用或者是学习 CSS 的灵感 | https://github.com/chokcoco/CSS-Inspiration |
css_tricks: 总结了一些常用的 CSS 的新属性和一点奇技淫巧 | https://github.com/QiShaoXuan/css_tricks |
animista: 各种 CSS 实现的效果,还有代码演示,方便直接复制代码 | http://animista.net/ |
spinkit: 汇集了实现各种加载效果的 CSS 代码片段 | https://tobiasahlin.com/spinkit/ |
十天精通 CSS3: CSS3 教程 | https://www.imooc.com/learn/33 |
Animate: 有趣的,跨浏览器的 css3 动画库 | https://animate.style/ |
sass:Sass 是一种 CSS 的预编译语言,Sass 为 CSS 赋予了更强大的功能 | https://sass.bootcss.com/documentation |
less:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性 | https://less.bootcss.com/ |
cssdeck:在线 CSS 前端代码 Demo 样式效果 | http://cssdeck.com/ |
codepen:前端炫酷样式效果,各种 loading 效果,在线编程,Vue 组件也特别多 | https://codepen.io/ |
cubic-bezier:CSS3 贝塞尔曲线在线调试工具 | https://cubic-bezier.com/ |
Snapsvg:SVG 动效的 JS 库,各种炫酷的效果。 | http://snapsvg.io/ |
Cool Backgrounds:超酷的背景图片,渐变的色彩的图片背景都有,看起来很酷。 | https://coolbackgrounds.io/ |
文章由:知乎作者:追逐时光者编写
暂无评论...
版权声明:本文内容由互联网用户自发贡献或者转载,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 210093010@qq.com 举报,一经查实,本站将立刻删除。