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

:fire: 基于Vue2.0高仿微信App的单页应用
https://github.com/zhaohaodang/vue-WeChat

vue-cli vue-router vue2 vuejs2 vuex

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/zhaohaodang/vue-WeChat
• Owner: zhaohaodang
• Created: 2017-02-24T01:52:27.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T11:28:54.000Z (over 1 year ago)
• Last Synced: 2024-01-18T08:02:14.929Z (5 months ago)
• Topics: vue-cli, vue-router, vue2, vuejs2, vuex
• Language: Vue
• Homepage:
• Size: 5.77 MB
• Stars: 2,028
• Watchers: 105
• Forks: 548
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Lists

• awesome-vue - vue-WeChat - WeChat?style=social) - 基于Vue2高仿微信App的单页应用 (Demo示例)
• awesome-github-star - vue-WeChat
• awesome-github-vue - vue-WeChat - 基于Vue2高仿微信App的单页应用 (Demo示例)
• awesome-stars - vue-WeChat - :fire: 一款基于Vue2.0高仿微信App的单页应用 (Vue)
• awesome-vue - vue-WeChat - 基于Vue2高仿微信App的单页应用 (Demo示例)
• awesome-github-vue - vue-WeChat - 基于Vue2高仿微信App的单页应用 (Demo示例)
• awesome - vue-WeChat - 基于Vue2高仿微信App的单页应用 (Demo示例)
• awesome-github-vue - vue-WeChat - 基于Vue2高仿微信App的单页应用 (Demo示例)

README

        
# 基于 Vue.js2.0 高仿微信 App 的单页应用

## 概述

本项目是使用 Vue.js2.0 框架，搭配样式库[WeUI](https://weui.io/)，模仿微信 app 的样式和交互。

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

## 扫码体验

![https://vue-wechat-6gf4n43f268f8b05-1251265717.ap-shanghai.app.tcloudbase.com](./public/images/qrcode_vue-wechat.png "https://vue-wechat-6gf4n43f268f8b05-1251265717.ap-shanghai.app.tcloudbase.com/#/")

如果你觉得不错想给作者**点个赞**，可以给项目增加一个 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 dev

```

## 动图预览

**微信列表的滑动交互**

![微信列表的滑动交互](./public/images/gif/msg-operate.gif)

**搜素组件的动画效果**

![搜素组件的动画效果](./public/images/gif/search-active.gif)

**进入对话框**

![进入对话框](./public/images/gif/enter-dialogue.gif)

**对话框信息**

![对话框信息](./public/images/gif/dialogue-operate.gif)

**首页 Tab 切换**

![首页Tab切换](./public/images/gif/tab-switch.gif)

## 技术相关

- [vue-WeChat Wiki](https://github.com/zhaohaodang/vue-WeChat/wiki) 中记录了开发此项目需要的知识储备、开发思路、开发利器等。

- 每个主要的.vue 和.js 文件都有详细的**注释**提示，建议将仓库 `clone` 到本地，查看源码。

## 问题反馈

移步[Issues](https://github.com/zhaohaodang/vue-WeChat/issues)，欢迎提出问题和建议。

## 推荐

- [vue-see](https://github.com/zhaohaodang/vue-see) 适用于 Vue.2x 的图片预览插件