序言
那个工程项目是借助组织工作之余写的两个仿效QQapp的单网页应用领域,整座工程项目包涵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)
效果演示
工程项目演示请点击这里:http://cangdu.org:8003/dialogue(请用chrome手机模式预览)
说明
本工程项目主要就用于熟识vue2+vuex的用法
如有问题请直接在Issues中提出,或加qq:812571880
如果觉得对您学习vue有点点帮助,请右上角star一下吧 ^_^
目标功能
通讯录
发现
我
设置
新消息提醒
勿扰模式
闲聊
widows QQ已登录
搜索页
对话页
对话功能
单人机器智能对话页
聊天室
贴文
贴文点赞、评论
个人中心
详细资料
更多
个人相册
更多
收藏
我的钱包
购物
设置
登录
网页部分截图
单人闲聊
聊天室
贴文
工程项目布局
├── README.md // webpack配置文件
├── build // 工程项目打包路径
├── config // 上线工程项目文件,放在服务器即可正常访问
│└──index.js
├── favicon.ico
├── index.html
├──package.json
├── printscreen
├── src // 源代码目录
│├──App.vue // 网页入口文件
│├──components// 公共组件
││├── findandMe
│││└── findandMe.vue // 发现和我共同的模块的列表
││├── footer
│││└── foot.vue // 底部QQ导航
││└── 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 // QQ首页(对话列表页)
││├── 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 // 关于QQ
│││││├── 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
36directories,133 files