这个项目是利用工作之余写的一个模仿微信 app 的单页面应用,整个项目包含 27 个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中。写这个项目主要目的是练习和熟悉 vue 和 vuex 的配合使用,利用 socket.io 实现实时聊天。
vue2+vue-router+webpack+vuex+sass+svg 构图+es6/7
源码地址:https://github.com/bailichen/vue-weixin
git clone https://github.com/bailichen/vue-weixin.git
cd vue-weixin
npm install
npm run dev (访问本地,运行后访问 http://localhost:8882)
项目演示请点击这里 (请用 chrome 手机模式预览)
本项目主要用于熟悉 vue2+vuex 的用法
如有问题请直接在 Issues 中提出,或加 qq:812571880
如果觉得对您学习 vue 有点点帮助,请右上角 star 一下吧 ^_^
├── README.md // webpack 配置文件
├── build // 项目打包路径
├── config // 上线项目文件,放在服务器即可正常访问
│ └── index.js
├── favicon.ico
├── index.html
├── package.json
├── printscreen
├── src // 源码目录
│ ├── App.vue // 页面入口文件
│ ├── components // 公共组件
│ │ ├── findandMe
│ │ │ └── findandMe.vue // 发现和我共同的模块的列表
│ │ ├── footer
│ │ │ └── foot.vue // 底部微信导航
│ │ └── header
│ │ └── head.vue // 头部公共组件
│ ├── config // 基本配置
│ │ ├── env.js // 环境切换配置
│ │ ├── fetch.js // 获取数据
│ │ ├── iscroll.js
│ │ ├── mUtils.js // 工具
│ │ ├── rem.js // px 转换 rem
│ │ ├── swiper.min.js // 轮播图控件
│ │ └── uploadPreview.js // 上传图片控件
│ ├── frames
│ │ ├── addressbook
│ │ │ ├── addressbook.vue // 通讯录
│ │ │ └── details
│ │ │ ├── details.vue // 详细资料
│ │ │ └── more
│ │ │ └── more.vue // 更多
│ │ ├── computer
│ │ │ └── computer.vue // pc 端登录
│ │ ├── conversation
│ │ │ ├── chatmessage
│ │ │ │ ├── chatmessage.vue // 单人聊天信息
│ │ │ │ └── groupchatmessage.vue // 群聊聊天信息
│ │ │ ├── groupchat.vue // 群聊
│ │ │ └── singlechat.vue // 单人对话
│ │ ├── dialogue
│ │ │ └── dialogue.vue // 微信首页(对话列表页)
│ │ ├── find
│ │ │ ├── find.vue // 发现
│ │ │ ├── friendcircle
│ │ │ │ └── friendcircle.vue // 朋友圈
│ │ │ └── miniapps
│ │ │ └── miniapps.vue // 小程序子页面
│ │ ├── me
│ │ │ ├── cardbag
│ │ │ │ └── cardbag.vue // 卡包
│ │ │ ├── collect
│ │ │ │ └── collect.vue // 我的收藏
│ │ │ ├── me.vue
│ │ │ ├── personaldetails
│ │ │ │ └── personaldetails.vue // 个人信息
│ │ │ ├── photoalbum
│ │ │ │ └── photoalbum.vue // 我的相册
│ │ │ ├── settings
│ │ │ │ ├── detailset
│ │ │ │ │ ├── aboutwc.vue // 关于微信
│ │ │ │ │ ├── chat.vue // 聊天
│ │ │ │ │ ├── currency.vue // 通用
│ │ │ │ │ ├── disturbance.vue // 勿扰模式
│ │ │ │ │ ├── help.vue // 帮助与反馈
│ │ │ │ │ ├── login.vue // 登录
│ │ │ │ │ ├── newmessage.vue // 新消息提醒
│ │ │ │ │ └── privacy.vue // 隐私
│ │ │ │ └── settings.vue // 设置
│ │ │ └── wallet
│ │ │ └── wallet.vue // 我的钱包
│ │ ├── search
│ │ │ └── search.vue // 搜索
│ │ └── transfer
│ │ └── transfer.vue
│ ├── images
│ ├── main.js // 程序入口文件,加载各种公共组件
│ ├── router
│ │ └── router.js // 所有页面路由控制中心
│ ├── service
│ │ ├── data
│ │ │ ├── album.js // 个人相册
│ │ │ ├── burse.js // 钱包数据
│ │ │ ├── chatmore.js
│ │ │ ├── collect.js // 我的收藏
│ │ │ ├── contacts.js // 联系人列表数据
│ │ │ ├── dialoglist.js // 对话列表
│ │ │ ├── friendcircle.js // 朋友圈数据
│ │ │ ├── groupchat.js // 群聊数据
│ │ │ ├── login.js // 个人用户信息
│ │ │ ├── search.js // 搜索的分类
│ │ │ └── userword.js
│ │ └── getData.js // 数据交互统一调配
│ ├── style
│ │ ├── public.scss // 公共样式
│ │ └── swiper.min.css
│ └── vuex // vuex 的状态管理
│ ├── action.js // 配置根 actions
│ ├── index.js // 引用 vuex,创建 store
│ ├── mutation-types.js // 定义常量 muations 名
│ └── mutation.js // 配置根 mutations
└── tree.md
36 directories, 133 files
1
whypool 2017-06-19 10:08:51 +08:00
6666
|
2
vipwpcom 2017-06-19 10:12:03 +08:00
66666
|
3
wjm2038 2017-06-19 10:42:56 +08:00 via Android
66666
|
4
xiahei 2017-06-19 10:43:27 +08:00 via Android
666
|
5
pzzrudlf 2017-06-19 11:02:18 +08:00
666,666
|
6
lxrmido 2017-06-19 11:30:08 +08:00
666666
|
7
wly19960911 2017-06-19 11:36:58 +08:00 via Android
提个建议,点击反馈
|
8
shuangguanQuail 2017-06-19 11:48:55 +08:00
收藏一波
|
9
Zohar 2017-06-19 11:56:34 +08:00 via Android
很棒棒哟!给你一朵小红花~
|
10
wxcszh 2017-06-19 11:56:40 +08:00
666 溜溜溜
|
11
feng1234 2017-06-19 11:57:41 +08:00
6666666
|
12
luanjia 2017-06-19 12:01:34 +08:00 via Android
6666
|
13
PythoneerDev6 2017-06-19 12:02:49 +08:00
厉害了
|
14
PythoneerDev6 2017-06-19 12:03:27 +08:00
开源了吗?
|
15
kiah 2017-06-19 12:03:34 +08:00
66666666
|
16
crytis 2017-06-19 12:06:30 +08:00 via iPhone
6666666666
|
17
mokeyjay 2017-06-19 12:06:48 +08:00 via Android
666666
|
18
aos OP @PythoneerDev6 源码地址在介绍里写了
|
19
lwbjing 2017-06-19 12:35:25 +08:00
666666
|
20
ZzFoo 2017-06-19 12:59:46 +08:00
666666
|
21
lhx2008 2017-06-19 13:03:41 +08:00
看到好多功能都没做,现在感觉微信还是挺复杂的
|
23
XuweiatTuSDK 2017-06-19 14:04:04 +08:00
666666666
|
24
fuliti 2017-06-19 14:04:33 +08:00
66666666
|
25
badcode 2017-06-19 14:09:21 +08:00 via Android
呀呀呀呀呀呀呀
|
26
onyourroad 2017-06-19 15:23:41 +08:00
6666666666
|
27
lj61785636 2017-06-19 15:36:55 +08:00 via iPhone
6666
|
28
SPACELAN 2017-06-19 16:03:37 +08:00
666666
|
29
ae86 2017-06-19 16:41:24 +08:00
666666
|
30
lrh3321 2017-06-19 17:37:34 +08:00
厉害了
|
31
fudanglp 2017-06-19 18:14:18 +08:00
666666
|
32
mengyaoss77 2017-06-19 18:26:39 +08:00
厉害了 抱拳了老铁
|
33
wenning 2017-06-19 19:49:36 +08:00
6666
|
34
Betacoefficient 2017-06-19 19:57:59 +08:00
好棒啊,灰常的有用啊
|
35
bozong 2017-06-19 20:12:25 +08:00 via iPhone
66666666666666666666
|
36
Ultraman 2017-06-19 20:22:43 +08:00
demo 是被那个智障刷挂了吗?我打不开了
|
37
tf141 2017-06-19 20:41:13 +08:00
强无敌
|
38
zonghua 2017-06-19 20:44:17 +08:00
有没有空把每个像素和动画的每一帧都高仿啊,这个好多地方多了空白线 b ( ̄▽ ̄) d
|
39
nVic 2017-06-19 21:02:35 +08:00
现在的微信过于复杂了,应该被换代。。。
|
41
wangzhi 2017-06-19 22:15:58 +08:00 via Android
66666
|
42
aaronlam 2017-06-19 22:27:19 +08:00
6,最近也在学习 VUE,希望楼主可以继续完善,赞!
|
43
algery 2017-06-19 22:48:22 +08:00
强!双击一波 666666
|
44
bw2 2017-06-19 22:52:32 +08:00
舅服你
|
45
wending 2017-06-19 23:12:33 +08:00
666 啊,这个页面的布局是你写的?我们公司最近的一个项目就需要这样仿写一个 APP 的前端界面
|
46
outloudvi 2017-06-19 23:21:21 +08:00 via Android
赞!还原度超高!
不过有点担心会不会有商标权争议什么的…… |
47
gswxy 2017-06-20 07:45:18 +08:00
666
|
48
baixiaowen 2017-06-20 07:51:59 +08:00
对 telegram 感兴趣吗? 我觉得抄一下 telegram 不错
|
49
v2chou 2017-06-20 09:02:06 +08:00
99999999
|
51
ivanyin 2017-06-20 10:05:00 +08:00
66666666666666666666
|
52
menduo 2017-06-20 16:47:49 +08:00
试了,很漂亮。
|
53
noNOno 2017-06-20 17:28:26 +08:00
666666
|
54
hsy123 2017-06-21 15:01:57 +08:00
66666666666
|
55
bailichen 2017-06-23 10:20:42 +08:00
666666666
|
56
xiaoyan2017 2019-04-09 23:59:16 +08:00
666,太赞了,很有学习借鉴意义。
https://blog.csdn.net/yanxinyun1990/article/details/89038427 |