All Projects → zhaohaodang → Vue Wechat

zhaohaodang / Vue Wechat

Licence: mit
🔥 基于Vue2.0高仿微信App的单页应用

Programming Languages

Vue
7211 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Wechat

Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (-87.83%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router, vue2
Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (-86.03%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router, vue2
Vue Objccn
🔥 Use Vue.js to develop a cross-platform full stack application / 用 Vue.js 开发的跨三端应用
Stars: ✭ 1,993 (+8.79%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router, vue2
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (-72.87%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router, vue2
Gpk admin
✨ GeekPark Content Management System
Stars: ✭ 150 (-91.81%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router, vue2
Vuetify Todo Pwa
✔️ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (-91.27%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router, vue2
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+13.1%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router, vue2
Douban
Douban book website demo by server side render
Stars: ✭ 468 (-74.45%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router
Vue Develop Template
A Vue.js template that can support more than 100 thousand lines of code in our business, I hope it can help you too~
Stars: ✭ 481 (-73.74%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router
Vue Mobile Cli
🚀 Vue移动端多页应用脚手架
Stars: ✭ 112 (-93.89%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Vue Chat
👥Vue全家桶+Socket.io+Express/Koa2打造一个智能聊天室。
Stars: ✭ 887 (-51.58%)
Mutual labels:  vuex, vuejs2, vue-router, vue2
Lulumi Browser
Lulumi-browser is a lightweight browser coded with Vue.js 2 and Electron.
Stars: ✭ 367 (-79.97%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router
Douban
Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + Superagent
Stars: ✭ 2,324 (+26.86%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (-60.21%)
Mutual labels:  vuex, vuejs2, vue-router, vue2
Manhuaren
vue2.0全家桶,仿漫画人官网(移动端)
Stars: ✭ 18 (-99.02%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router
Vue Ts Daily
基于vue、Typescript、pwa的一款习惯养成app
Stars: ✭ 735 (-59.88%)
Mutual labels:  vue-cli, vuex, vuejs2, vue-router
Pretty Vendor
[零食商贩] - 基于vue全家桶 + koa2 + sequelize + mysql 搭建的移动商城应用
Stars: ✭ 57 (-96.89%)
Mutual labels:  vue-cli, vuex, vue-router, vue2
Vms
A Vue.js 2.0 Content Management System
Stars: ✭ 885 (-51.69%)
Mutual labels:  vuex, vuejs2, vue-router, vue2
Vue Cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区,使用webpack2打包
Stars: ✭ 1,134 (-38.1%)
Mutual labels:  vuex, vuejs2, vue-router, vue2
Vue Cli Multipage Bootstrap
vue-cli-multipage-bootstrap demo with vue2+vue-router+vuex+bootstrap+markdown for learning vue2.0
Stars: ✭ 105 (-94.27%)
Mutual labels:  vue-cli, vuex, vue-router, vue2

一款基于Vue2.0高仿微信App的单页应用

概述

本项目是使用Vue.js2.0框架,搭配样式库WeUI,模仿微信app的交互,做到以假乱真的效果。

项目地址 https://github.com/zhaohaodang/vue-WeChat

手机预览

首选红色,加载较快

https://sinacloud.net/vue-wechat/images/demo-qrcode-gitee.png

蓝色为备用地址,加载较慢

https://sinacloud.net/vue-wechat/images/demo-qrcode-github.png

测试机为iPhone 6s,在微信内置浏览器以及Safari、Chrome浏览器中运行良好。

如果你觉得不错想给作者点个赞,可以给项目增加一个 Star ★,项目会被收录在 Your stars 中,方便日后查看。

如果你想时时关注项目动态,可 Watch ⊙ 此项目,github平台会及时通知你项目的动态。

本地预览

1.克隆代码到本地

git clone https://github.com/zhaohaodang/vue-WeChat.git

2.进入项目路径

cd vue-WeChat

3.安装依赖(安装较慢的话建议使用淘宝镜像)

npm install

4.启动项目

npm run serve

桌面预览

加载较快  https://zhaohd.gitee.io/vue2-wechat

备选 加载较慢 https://vue2-wechat.github.io

桌面端浏览时,建议打开开发者工具 F12 ,模拟手机预览 Ctrl+Shift+M (Chrome)

动图预览

微信列表的滑动交互

微信列表的滑动交互

搜素组件的动画效果

搜素组件的动画效果

进入对话框

进入对话框

对话框信息

对话框信息

首页Tab切换

首页Tab切换

技术相关

  • vue-WeChat Wiki 中记录了开发此项目需要的知识储备、开发思路、开发利器等。
  • 每个主要的.vue和.js文件都有详细的注释提示,建议将仓库 clone 到本地,查看源码。

示例1( store.js 注解)

store.js文件注解

示例2( App.vue 注解)

App.vue 注解

问题反馈

移步Issues,欢迎提出问题和建议。

其他

  • vue-see 适用于 Vue.2x 的图片预览插件
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].