[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8738":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":30,"discoverSource":31},8738,"vue-weixin","bailichen\u002Fvue-weixin","bailichen","Vue2 全家桶仿 微信App 项目，支持多人在线聊天和机器人聊天","",null,"Vue",2926,816,111,45,0,1,2,3,4,30.74,"MIT License",false,"master",true,[],"2026-06-12 02:01:57","### 通知\n\n项目vue+vuex版本已更新版本，只接口图片不加载，不影响初学者学习vue。\n\n### 更新说明\n```\n\"vue\": \"^2.5.2\",\n\n\"vue-router\": \"^3.0.1\",\n\n\"vuex\": \"^3.1.0\"\n\n\"webpack\": \"^4.17.1\",\n\n```\n### 前言\n\n这个项目是利用工作之余写的一个模仿微信app的单页面应用，整个项目包含27个页面，涉及实时群聊，机器人聊天，同学录，朋友圈等等，后续页面还是开发中。写这个项目主要目的是练习和熟悉vue和vuex的配合使用，利用socket.io实现实时聊天。\n\n欢迎各路大神Issues\n\n### 技术栈\n\n```\nvue2+vue-router+webpack+vuex+scss+svg构图+es6\u002F7\n\n```\n\n### 项目运行\n\n```\ngit clone https:\u002F\u002Fgithub.com\u002Fbailichen\u002Fvue-weixin.git\n\ncd vue-weixin\n\nnpm install\n\nnpm run start (访问本地，运行后访问 http:\u002F\u002Flocalhost:10022)\n\n```\n### 效果演示 \n\n[项目演示请点击这里](http:\u002F\u002Fcangdu.org:8003\u002Fdialogue) （请用chrome手机模式预览）\n\n\n### 移动端扫描下方二维码\n\n![](https:\u002F\u002Fgithub.com\u002Fbailichen\u002Fvue-weixin\u002Fraw\u002Fmaster\u002Fprintscreen\u002Fcode.png)\n\n### 后台代码在这里\n[后台代码](https:\u002F\u002Fgithub.com\u002Fbailicangdu\u002Fnode-weixin)\n\n### 说明\n\n> 本项目主要用于熟悉vue2+vuex的用法\n\n> 如有问题请直接在Issues中提出\n\n> 如果觉得对您学习vue有点点帮助，请右上角star一下吧   ^_^\n\n# 目标功能\n\n- [x] 微信 \n- [x] 通讯录\n- [x] 通讯录右边导航功能\n- [x] 发现 \n- [x] 我\n- [x] 设置\n- [x] 新消息提醒\n- [x] 勿扰模式\n- [x] 聊天\n- [x] widows 微信已登录\n- [x] 搜索页\n- [x] 对话页\n- [x] 对话功能\n- [x] 单人机器人智能对话页\n- [x] 群聊\n- [x] 朋友圈\n- [x] 朋友圈点赞、评论\n- [x] 个人中心\n- [x] 详细资料\n- [x] 更多\n- [x] 个人相册\n- [x] 更多\n- [x] 收藏\n- [x] 我的钱包\n- [x] 购物\n- [x] 设置\n- [x] 登录\n\n# 页面部分截图\n\n### 单人聊天、群聊\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbailichen\u002Fvue-weixin\u002Fraw\u002Fmaster\u002Fprintscreen\u002Fsinglechat.gif\" width=\"300\" height=\"530\" alt=\"\">  \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbailichen\u002Fvue-weixin\u002Fraw\u002Fmaster\u002Fprintscreen\u002Fgroupchat.gif\" width=\"300\" height=\"530\" alt=\"\">\n\n\n### 朋友圈\n\n###### 上传图片、点赞\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbailichen\u002Fvue-weixin\u002Fraw\u002Fmaster\u002Fprintscreen\u002Fshangchuan.gif\" width=\"300\" height=\"530\"\u002F> \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbailichen\u002Fvue-weixin\u002Fraw\u002Fmaster\u002Fprintscreen\u002Flike.gif\" width=\"300\" height=\"530\"\u002F>\n\n# 项目布局\n\n```\n\n├── README.md                                    \u002F\u002F webpack配置文件\n├── build                                        \u002F\u002F 项目打包路径\n├── config                                       \u002F\u002F 上线项目文件，放在服务器即可正常访问\n│   └── index.js\n├── favicon.ico\n├── index.html\n├── package.json\n├── printscreen\n├── src                                          \u002F\u002F 源码目录\n│   ├── App.vue                                  \u002F\u002F 页面入口文件\n│   ├── components                               \u002F\u002F 公共组件\n│   │   ├── findandMe\n│   │   │   └── findandMe.vue                    \u002F\u002F 发现和我共同的模块的列表\n│   │   ├── footer\n│   │   │   └── foot.vue                         \u002F\u002F 底部微信导航\n│   │   └── header\n│   │       └── head.vue                         \u002F\u002F 头部公共组件\n│   ├── config                                   \u002F\u002F 基本配置\n│   │   ├── env.js                               \u002F\u002F 环境切换配置\n│   │   ├── fetch.js                             \u002F\u002F 获取数据\n│   │   ├── iscroll.js \n│   │   ├── mUtils.js                            \u002F\u002F 工具\n│   │   ├── rem.js                               \u002F\u002F px转换rem\n│   │   ├── swiper.min.js                        \u002F\u002F 轮播图控件\n│   │   └── uploadPreview.js                     \u002F\u002F 上传图片控件\n│   ├── frames\n│   │   ├── addressbook\n│   │   │   ├── addressbook.vue                  \u002F\u002F 通讯录\n│   │   │   └── details\n│   │   │       ├── details.vue                  \u002F\u002F 详细资料\n│   │   │       └── more\n│   │   │           └── more.vue                 \u002F\u002F 更多\n│   │   ├── computer\n│   │   │   └── computer.vue                     \u002F\u002F pc端登录\n│   │   ├── conversation\n│   │   │   ├── chatmessage\n│   │   │   │   ├── chatmessage.vue              \u002F\u002F 单人聊天信息\n│   │   │   │   └── groupchatmessage.vue         \u002F\u002F 群聊聊天信息\n│   │   │   ├── groupchat.vue                    \u002F\u002F 群聊\n│   │   │   └── singlechat.vue                   \u002F\u002F 单人对话\n│   │   ├── dialogue\n│   │   │   └── dialogue.vue                     \u002F\u002F 微信首页(对话列表页)\n│   │   ├── find\n│   │   │   ├── find.vue                         \u002F\u002F 发现\n│   │   │   ├── friendcircle\n│   │   │   │   └── friendcircle.vue             \u002F\u002F 朋友圈\n│   │   │   └── miniapps\n│   │   │       └── miniapps.vue                 \u002F\u002F 小程序子页面\n│   │   ├── me\n│   │   │   ├── cardbag\n│   │   │   │   └── cardbag.vue                  \u002F\u002F 卡包\n│   │   │   ├── collect\n│   │   │   │   └── collect.vue                  \u002F\u002F 我的收藏\n│   │   │   ├── me.vue\n│   │   │   ├── personaldetails\n│   │   │   │   └── personaldetails.vue          \u002F\u002F 个人信息\n│   │   │   ├── photoalbum\n│   │   │   │   └── photoalbum.vue               \u002F\u002F 我的相册\n│   │   │   ├── settings\n│   │   │   │   ├── detailset\n│   │   │   │   │   ├── aboutwc.vue              \u002F\u002F 关于微信\n│   │   │   │   │   ├── chat.vue                 \u002F\u002F 聊天\n│   │   │   │   │   ├── currency.vue             \u002F\u002F 通用\n│   │   │   │   │   ├── disturbance.vue          \u002F\u002F 勿扰模式\n│   │   │   │   │   ├── help.vue                 \u002F\u002F 帮助与反馈\n│   │   │   │   │   ├── login.vue                \u002F\u002F 登录\n│   │   │   │   │   ├── newmessage.vue           \u002F\u002F 新消息提醒\n│   │   │   │   │   └── privacy.vue              \u002F\u002F 隐私\n│   │   │   │   └── settings.vue                 \u002F\u002F 设置\n│   │   │   └── wallet\n│   │   │       └── wallet.vue                   \u002F\u002F 我的钱包\n│   │   ├── search\n│   │       └── search.vue                       \u002F\u002F 搜索     \n│   ├── images\n│   ├── main.js                                  \u002F\u002F 程序入口文件，加载各种公共组件\n│   ├── router\n│   │   └── router.js                           \u002F\u002F 所有页面路由控制中心\n│   ├── service\n│   │   ├── data\n│   │   │   ├── album.js                        \u002F\u002F 个人相册\n│   │   │   ├── burse.js                        \u002F\u002F 钱包数据\n│   │   │   ├── chatmore.js\n│   │   │   ├── collect.js                     \u002F\u002F 我的收藏\n│   │   │   ├── contacts.js                    \u002F\u002F 联系人列表数据\n│   │   │   ├── dialoglist.js                  \u002F\u002F 对话列表\n│   │   │   ├── friendcircle.js                \u002F\u002F 朋友圈数据\n│   │   │   ├── groupchat.js                   \u002F\u002F 群聊数据\n│   │   │   ├── login.js                       \u002F\u002F 个人用户信息\n│   │   │   ├── search.js                      \u002F\u002F 搜索的分类\n│   │   │   └── userword.js\n│   │   └── getData.js                         \u002F\u002F 数据交互统一调配\n│   ├── style\n│   │   ├── public.scss                        \u002F\u002F 公共样式\n│   │   └── swiper.min.css\n│   └── vuex                                   \u002F\u002F vuex的状态管理\n│       ├── action.js                          \u002F\u002F 配置根actions\n│       ├── index.js                           \u002F\u002F 引用vuex，创建store\n│       ├── mutation-types.js                  \u002F\u002F 定义常量muations名\n│       └── mutation.js                        \u002F\u002F 配置根mutations\n└── tree.md\n\n36 directories, 133 files\n\n```\n\n\n\n\n","该项目是一个基于Vue2全家桶构建的微信App模仿项目，支持多人在线聊天及机器人聊天功能。它利用了Vue、Vuex进行状态管理，并结合socket.io实现了实时通信能力，同时采用SCSS和SVG等技术来优化界面设计。整个应用包含27个页面，涵盖了从基本的聊天功能到朋友圈动态发布与互动等多个方面，非常适合用于学习Vue框架及其生态系统组件的实际应用开发技巧，特别是对于希望深入了解如何将Vue与Vuex结合使用的开发者来说，该项目提供了一个很好的实践平台。","2026-06-11 03:19:33","top_language"]