神级程序员用Vue仿了一个微信，这6000行代码，月薪20K都难请

小编今天逛论坛看到了一位大牛，用VUE2仿了一个微信APP项目，小编我自己也把他的项目CIPY了一份，自己运行了一下，暂时没发现BUG，分享给头条上的伙伴们学习，大家想自己练习的可以拿去练习，文末有领取地址，现在的前端水分都很深，企业也很难找到合适的人才，月薪2万也很难招到干事的人，导致很大一部分有真才实干的程序员不能找到满意的工作，话不多说，直接分享这个案例。

这篇文章分享之前我还是要推荐下我自己的前端群：595549645，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

前言

这个项目是利用工作之余写的一个模仿微信app的单页面应用，整个项目包含27个页面，涉及实时群聊，机器人聊天，同学录，朋友圈等等，后续页面还是开发中。写这个项目主要目的是练习和熟悉vue和vuex的配合使用，利用socket.io实现实时聊天。

技术栈

vue2+vue-router+webpack+vuex+sass+svg构图+es6/7

项目运行

git clone https://github.com/bailichen/vue-weixin.gitcd vue-weixin

说明

本项目主要用于熟悉vue2+vuex的用法

目标功能

• [x] 微信

• [x] 通讯录

• [x] 发现

• [x] 我

• [x] 设置

• [x] 新消息提醒

• [x] 勿扰模式

• [x] 聊天

• [x] widows 微信已登录

• [x] 搜索页

• [x] 对话页

• [x] 对话功能

• [x] 单人机器人智能对话页

• [x] 群聊

• [x] 朋友圈

• [x] 朋友圈点赞、评论

• [x] 个人中心

• [x] 详细资料

• [x] 更多

• [x] 个人相册

• [x] 更多

• [x] 收藏

• [x] 我的钱包

• [x] 购物

• [x] 设置

• [x] 登录

页面部分截图

单人聊天

群聊

朋友圈

├── README.md // webpack配置文件├── build // 项目打包路径├── config // 上线项目文件，放在服务器即可正常访问│ └── index.js├── favicon.ico├── index.html├── package.json├── printscreen

1. 好的学习方法至关重要的，我们在学习web前端开发时，一定要有一套属于自己的学习方法。掌握这套学习方法之后可以在一定程度上提高我们的学习效率，学习初期一定要根据根据web前端学习路线制订一份详细的学习计划，而且学习计划要根据课程进度以及自身的实际情况，适时的做出调整。最后，多动手，多动脑

2. 这个仿微信APP的案例到这里就做结束了，想要完整代码自己学习练手的小伙伴进我的群自助领取，已经上传到群文件里了：595549645，欢迎初学和进阶中的小伙伴。

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频