盘点 10 个 GitHub 上的前端高仿项目

更新日期: 2022-07-05阅读: 1.2k标签: 项目作者: CUGGZ

大家好,我是CUGGZ。今天来分享 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

来源: 前端充电宝

链接: https://fly63.com/article/detial/11853

程序员最喜欢什么样的项目经理?

在当今的专业环境中,项目经理需要戴上各种帽子,在管理团队的日常功能和理解大局策略之间切换。正因为如此,项目经理对组织变得更有价值,并且他们对技能和战略角色的需求在全球范围内不断增长。但这也提出了一个问题:如何在如此高压的环境中成为更好的项目经理?

原生JS实现随机点名项目

随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停。所用知识:Math.random() * num: 产生从0到num的随机数,Math.floor(): 向下取整,简单的DOM操作等

没有项目经验找工作处处碰壁怎么办?

我马上就要毕业了没有开发经验怎么办?我投递了 N 多公司全部没有给工作机会,有的给了面试机会也是没有下文了怎么办?我简历上什么东西都没有,要不要伪造一个工作经历呢?

当了项目经理才明白的10件事!

项目经理这个神奇的职位,改变了我很多工作处事的方式,从前性情纯真的耿直boy,现在变成了人鬼皆爱的老油条, 以下是我当了项目经理之后明白的10件事, 如有雷同,真是太巧。

pm2 快速部署前端项目

pm2 大家应该都知道,主要是用来管理 node 进程,但是同样可以用来部署前端代码。也可以手动添加 public key 到服务器上的 ~/.ssh/authorized_keys,

关于小型长周期项目的一些建议

我不是专业的项目经理,这里不讨论大型项目管理的事情。我们比较常遇到的可能是小型的长周期项目,比如2-4个人,做半年甚至一年的项目。这种项目通常不会有专职的项目经理

水印项目的实现以及两种实现方案的选优

通过 attachShadow 这个方法生成一个shadow root 即shadow的根节点,然后在这个根节点下面通过循环语句添加水印,利用position为absolute进行排版,使其铺满容器

重构项目,你真的准备好了吗?

我相信每个接受过老项目的程序员可能都吐槽过“前人的代码都是屎”。一个已经有些年头的项目,几乎肯定可以看到——到处拷贝来拷贝去的代码,随处可见的拼写错误,头重脚轻的函数……

浅谈RPC

近几年随着微服务化项目的崛起,逐渐成为许多公司中大型分布式系统架构的主流方式,而今天所说的 RPC 在这其中扮演着至关重要的角色。随着这段日子公司项目微服务化的演进,发现在日常开发中都在隐式或显式的使用 RPC

在Vue项目中使用Eslint+Prettier+Stylelint

首先搭建vue项目,lint选择ESLint + Prettier,配置方式选择In dedicated config files。具体搭建过程这里就不赘述了,如果不熟悉的同学可以点击这里。配置 Stylelint,目前还没有stylelint选项,需要我们自己安装相关的 npm 包

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!