网站首页 > 技术文章 正文
大家好,我是Echa。
今天来分享 Github 上的 10 个高仿前端项目。
概览:
- 高仿QQ音乐(Vue)
- 高仿网易云音乐(Vue)
- 高仿网易云音乐(React)
- 高仿B站(React)
- 高仿掘金(Vue)
- 高仿饿了么(Vue)
- 高仿微信(Vue )
- 高仿 Instagram(React)
- 高仿 Stackoverflow(React)
- 高仿 Spotify(React)
1. 高仿 QQ音乐(Vue)
一个使用 Vue3+TS 开发的音乐播放器,界面模仿 QQ 音乐 Mac 客户端,支持黑夜模式。
Github:https://github.com/SmallRuralDog/vue3-music
2. 高仿网易云音乐(Vue)
一个基于 Vue2 和 Vue-CLI3 的高仿网易云 Mac 客户端播放器。使用了 Vue 全家桶、Sass、better-scroll、ElementUI 等技术实现。
该项目实现了mv 页、cd 页、搜索建议、搜索详情、播放、发现页、播放列表、播放记录、全部歌单、歌单详情、最新音乐、主题换肤功能、登录等功能。
Github:https://github.com/sl1673495/vue-netease-music
3. 高仿网易云音乐(React)
一个基于 React、TypeScript 的高仿网易云 Mac 客户端播放器。使用 React Hook 做状态管理,没有使用额外的数据管理库。除此之外,还使用到了CSS Modules、Webpack、Graphql 等技术。
该项目实现了登录/登出、发现页、每日歌曲推荐页、全部歌单页、最新音乐页、歌单详情页、音乐播放详情页、播放记录、搜索、创建和收藏的歌单列表等功能。
Github:https://github.com/uniquemo/react-netease-music
4. 高仿B站(React)
高仿B站 Web 移动端,基于 SSR 服务端渲染模板,使用 React 16.8,Typescript 开发,后端服务使用 Express 实现。
该项目实现了首页、分类页、排行榜、搜索、视频详情页、 UP主页、个人中心、直播、直播列表、分类、直播间等功能。
Github:https://github.com/dxx/react-bilibili
5. 高仿掘金(Vue)
高仿掘金,整合 vue + nuxt + axios + vuex + vue-router,是一个基于 Nuxt 的服务器端渲染 Demo。
该项目实现了服务器端渲染、静态页面部署、掘金首页、掘金推荐列表、掘金小册、滚动分页加载、不同端的布局适配等功能。
Github:https://github.com/xuqiang521/nuxt-ssr-demo
6. 高仿饿了么(Vue)
一个使用 vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg 构建的具有 45 个页面的仿饿了么的大型单页面应用,包括注册、登录、商品展示、购物车、下单等功能。
Github:https://github.com/bailicangdu/vue2-elm
7. 高仿微信(Vue )
一个基于 Vue.js 2.0 的高仿微信 App 的单页应用,使用 Vue.js2.0 框架,搭配样式库 WeUI,模仿微信 app 的样式和交互。
Github:https://github.com/zhaohaodang/vue-WeChat
8. 高仿 Instagram(React)
一个仿 Instagram 项目,前端使用 React、状态管理使用 Redux、路由使用 React Router、表格管理使用 Formik、动画使用 React Spring、Websocket管理使用 Socket.io、后端使用 Express、数据库使用 MongoDB。
Github:https://github.com/Sandermoen/instaclone
9. 高仿 Stackoverflow(React)
这个项目是 Stackoverflow 的一个简化版的全栈克隆。使用 ReactJs、NextJs、Storybook、PostCSS、NodeJs、Express、MongoDB、Mongoose 等技术实现。
Github:https://github.com/salihozdemir/stackoverflow-clone
10. 高仿 Spotify(React)
一个 Spotify Web 播放器的前端克隆项目。使用 React (create-react-app CLI)、react-router-dom、axios 等技术实现。
Giuhub:https://github.com/JL978/spotify-clone-client
猜你喜欢
- 2025-05-25 React 开发卡脖子?7 个硬核技巧让项目性能翻倍不踩雷
- 2025-05-25 前端项目自动检测更新并提示用户刷新页面
- 2025-05-25 一周练完40个前端项目,你的水平可以突飞猛进,附源码!拿走不谢
- 2024-09-24 5 分钟搞定!无需服务器、域名,快速部署前端项目!
- 2024-09-24 开源项目推荐:React18、TS、Vite、Antd5 开箱即用中后台前端项目
- 2024-09-24 前端项目从计划到上线的大致流程
- 2024-09-24 ?开源月报? 第8期,Web前端&移动端优质项目合集
- 2024-09-24 大型项目前端架构浅谈(8000字原创)
- 2024-09-24 别再说找不到web前端项目练手了,这套最全的前端实战案例请拿去
- 2024-09-24 一周练完40个web前端项目,你就无敌了
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)