diff --git a/.gitignore b/.gitignore index a7e7753..1baec4a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ .DS_Store node_modules/ -dist/ -npm-debug.log weixin/ +npm-debug.log + diff --git a/README.md b/README.md index f37fcfb..ec9a29f 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,47 @@ +## 前言 -### 利用vue2+vuex写一个模仿微信app的单页面应用 -使用SVG格式构建页面icon图 +这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中。写这个项目主要目的是练习和熟悉vue和vuex的配合使用,利用socket.io实现实时聊天。 +欢迎各路大神Issuess + +## 技术栈 + +``` +vue2+vue-router+webpack+vuex+sass+svg构图+es6/7+socket.io+http-proxy-middleware + +``` + +##### 项目运行 + +``` +git clone https://github.com/bailichen/vue-weixin.git + +cd vue-weixin + +npm install + +npm run buid (访问线上后台系统) + +npm run dev (访问本地,运行后访问 http://localhost:8882) + +``` +### 效果演示 + +[项目演示请点击这里](http://cangdu.org:8003/dialogue) (请用chrome手机模式预览) + + +### 移动端扫描下方二维码 + +![](https://github.com/bailichen/vue-weixin/raw/master/printscreen/code.png) + + +### 说明 + +> 本项目主要用于熟悉vue2+vuex,svg的用法 + +> 如有问题请直接在Issues中提出,或加qq:812571880 + +> 如果觉得对您学习vue有点点帮助,请右上角star一下吧 ^_^ # 目标功能 - [x] 微信 @@ -31,92 +71,34 @@ - [x] 设置 - [x] 登录 - - -# 页面部分截图 - -### 底部导航 - - - -### 通讯录 - - - -### 单人聊天 - - - - -### 群聊 - - - - -### 发现 - - - -### 朋友圈 - -###### 上传图片 - - - -###### 点赞 - - - -###### 评论 - - - -### 个人资料 - - - - - - - - - - - - - - - - - # 项目布局 ``` -├── README.md// webpack配置文件 -├── build// 项目打包路径 -├── config// 上线项目文件,放在服务器即可正常访问 +├── README.md // webpack配置文件 +├── build // 项目打包路径 +├── config // 上线项目文件,放在服务器即可正常访问 │   └── index.js ├── favicon.ico ├── index.html ├── package.json ├── printscreen -├── src// 源码目录 -│   ├── App.vue// 页面入口文件 -│   ├── components// 公共组件 +├── src // 源码目录 +│   ├── App.vue // 页面入口文件 +│   ├── components // 公共组件 │   │   ├── findandMe -│   │   │   └── findandMe.vue// 发现和我共同的模块的列表 +│   │   │   └── findandMe.vue // 发现和我共同的模块的列表 │   │   ├── footer -│   │   │   └── foot.vue// 底部微信导航 +│   │   │   └── foot.vue // 底部微信导航 │   │   └── header -│   │   └── head.vue// 头部公共组件 -│   ├── config// 基本配置 -│   │   ├── env.js// 环境切换配置 -│   │   ├── fetch.js// 获取数据 +│   │   └── head.vue // 头部公共组件 +│   ├── config // 基本配置 +│   │   ├── env.js // 环境切换配置 +│   │   ├── fetch.js // 获取数据 │   │   ├── iscroll.js -│   │   ├── mUtils.js// 工具 -│   │   ├── rem.js// px转换rem -│   │   ├── swiper.min.js// 轮播图控件 +│   │   ├── mUtils.js // 工具 +│   │   ├── rem.js // px转换rem +│   │   ├── swiper.min.js // 轮播图控件 │   │   └── uploadPreview.js // 上传图片控件 │   ├── frames │   │   ├── addressbook @@ -165,38 +147,55 @@ │   │   │   └── wallet │   │   │   └── wallet.vue // 我的钱包 │   │   ├── search -│   │   │   └── search.vue// 搜索 +│   │   │   └── search.vue // 搜索 │   │   └── transfer │   │   └── transfer.vue │   ├── images -│   ├── main.js// 程序入口文件,加载各种公共组件 +│   ├── main.js // 程序入口文件,加载各种公共组件 │   ├── router -│   │   └── router.js// 所有页面路由控制中心 +│   │   └── router.js // 所有页面路由控制中心 │   ├── service │   │   ├── data -│   │   │   ├── album.js// 个人相册 -│   │   │   ├── burse.js// 钱包数据 +│   │   │   ├── album.js // 个人相册 +│   │   │   ├── burse.js // 钱包数据 │   │   │   ├── chatmore.js -│   │   │   ├── collect.js// 我的收藏 +│   │   │   ├── collect.js // 我的收藏 │   │   │   ├── contacts.js // 联系人列表数据 │   │   │   ├── dialoglist.js // 对话列表 │   │   │   ├── friendcircle.js // 朋友圈数据 │   │   │   ├── groupchat.js // 群聊数据 -│   │   │   ├── login.js// 个人用户信息 -│   │   │   ├── search.js// 搜索的分类 +│   │   │   ├── login.js // 个人用户信息 +│   │   │   ├── search.js // 搜索的分类 │   │   │   └── userword.js -│   │   └── getData.js// 数据交互统一调配 +│   │   └── getData.js // 数据交互统一调配 │   ├── style -│   │   ├── public.scss//公共样式 +│   │   ├── public.scss //公共样式 │   │   └── swiper.min.css -│   └── vuex// vuex的状态管理 -│   ├── action.js// 配置根actions -│   ├── index.js// 引用vuex,创建store -│   ├── mutation-types.js// 定义常量muations名 -│   └── mutation.js// 配置根mutations +│   └── vuex // vuex的状态管理 +│   ├── action.js // 配置根actions +│   ├── index.js // 引用vuex,创建store +│   ├── mutation-types.js // 定义常量muations名 +│   └── mutation.js // 配置根mutations └── tree.md - 36 directories, 133 files -``` \ No newline at end of file +``` + +# 页面部分截图 + +### 单人聊天、群聊 + + + + +### 朋友圈 + +###### 上传图片 + + + +###### 点赞、评论 + + + diff --git a/printscreen/code.png b/printscreen/code.png new file mode 100644 index 0000000..0f0b928 Binary files /dev/null and b/printscreen/code.png differ diff --git a/printscreen/group.jpg b/printscreen/group.jpg index 1c76ad3..4d28961 100644 Binary files a/printscreen/group.jpg and b/printscreen/group.jpg differ diff --git a/src/frames/conversation/chatmessage/groupchatmessage.vue b/src/frames/conversation/chatmessage/groupchatmessage.vue index 3e6cda9..f8c91de 100644 --- a/src/frames/conversation/chatmessage/groupchatmessage.vue +++ b/src/frames/conversation/chatmessage/groupchatmessage.vue @@ -2,15 +2,18 @@
-
-