[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8810":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":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":17,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":32,"discoverSource":33},8810,"vue-WeChat","zhaohaodang\u002Fvue-WeChat","zhaohaodang",":fire: 基于Vue2.0高仿微信App的单页应用","",null,"Vue",2115,554,101,3,0,1,2,57.93,false,"master",true,[24,25,26,27,28],"vue-cli","vue-router","vue2","vuejs2","vuex","2026-06-12 04:00:41","# 基于 Vue.js2.0 高仿微信 App 的单页应用\n\n## 概述\n\n本项目是使用 Vue.js2.0 框架，搭配样式库[WeUI](https:\u002F\u002Fweui.io\u002F)，模仿微信 app 的样式和交互。\n\n项目地址 `https:\u002F\u002Fgithub.com\u002Fzhaohaodang\u002Fvue-WeChat`\n\n## 扫码体验\n\n![https:\u002F\u002Fvue-wechat-6gf4n43f268f8b05-1251265717.ap-shanghai.app.tcloudbase.com](.\u002Fpublic\u002Fimages\u002Fqrcode_vue-wechat.png \"https:\u002F\u002Fvue-wechat-6gf4n43f268f8b05-1251265717.ap-shanghai.app.tcloudbase.com\u002F#\u002F\")\n\n如果你觉得不错想给作者**点个赞**，可以给项目增加一个 Star ★，项目会被收录在 Your stars 中，方便日后查看。\n\n如果你想时时**关注**项目动态，可 Watch ⊙ 此项目，github 平台会及时通知你项目的动态。\n\n## 启动项目\n\n1.克隆代码到本地\n\n```\ngit clone https:\u002F\u002Fgithub.com\u002Fzhaohaodang\u002Fvue-WeChat.git\n```\n\n2.进入项目路径\n\n```\ncd vue-WeChat\n```\n\n3.安装依赖（安装较慢的话建议使用淘宝镜像）\n\n```\nnpm install\n```\n\n4.启动项目\n\n```\nnpm run dev\n```\n\n## 动图预览\n\n**微信列表的滑动交互**\n\n![微信列表的滑动交互](.\u002Fpublic\u002Fimages\u002Fgif\u002Fmsg-operate.gif)\n\n**搜素组件的动画效果**\n\n![搜素组件的动画效果](.\u002Fpublic\u002Fimages\u002Fgif\u002Fsearch-active.gif)\n\n**进入对话框**\n\n![进入对话框](.\u002Fpublic\u002Fimages\u002Fgif\u002Fenter-dialogue.gif)\n\n**对话框信息**\n\n![对话框信息](.\u002Fpublic\u002Fimages\u002Fgif\u002Fdialogue-operate.gif)\n\n**首页 Tab 切换**\n\n![首页Tab切换](.\u002Fpublic\u002Fimages\u002Fgif\u002Ftab-switch.gif)\n\n## 技术相关\n\n- [vue-WeChat Wiki](https:\u002F\u002Fgithub.com\u002Fzhaohaodang\u002Fvue-WeChat\u002Fwiki) 中记录了开发此项目需要的知识储备、开发思路、开发利器等。\n- 每个主要的.vue 和.js 文件都有详细的**注释**提示，建议将仓库 `clone` 到本地，查看源码。\n\n## 问题反馈\n\n移步[Issues](https:\u002F\u002Fgithub.com\u002Fzhaohaodang\u002Fvue-WeChat\u002Fissues)，欢迎提出问题和建议。\n\n## 推荐\n\n- [vue-see](https:\u002F\u002Fgithub.com\u002Fzhaohaodang\u002Fvue-see) 适用于 Vue.2x 的图片预览插件\n","该项目是一个基于Vue2.0框架高仿微信App的单页应用。它利用了Vue.js2.0、Vue Router和Vuex等技术，结合WeUI样式库，实现了与微信相似的用户界面和交互体验，包括聊天列表滑动、搜索组件动画效果以及对话框信息展示等功能。项目结构清晰，代码注释详尽，适合前端开发者学习Vue.js及其生态系统相关技术，同时也可以作为构建即时通讯类Web应用的参考案例。","2026-06-11 03:19:51","top_language"]