wechat-by-vue
所属分类:构建工具
开发工具:Vue
文件大小:1056KB
下载次数:0
上传日期:2019-01-30 06:47:23
上 传 者:
sh-1993
说明: Vue.js 2.0 实战项目 基于 Vue + Vuex + Vue-router + Webpack 2.0 打造微信界面,实现了微信聊天、搜索、点赞、通讯录(快速导航)、个人中心、模拟对话、朋友圈、设置等功能。
(Vue.js 2.0 practical project builds WeChat interface based on Vue+Vuex+Vue router+Webpack 2.0, and realizes WeChat chat, search, like, address book (quick navigation), personal center, simulated dialogue, circle of friends, settings and other functions.)
文件列表:
.babelrc (312, 2019-01-30)
.editorconfig (147, 2019-01-30)
.eslintignore (23, 2019-01-30)
.eslintrc.js (642, 2019-01-30)
.postcssrc.js (197, 2019-01-30)
build (0, 2019-01-30)
build\build.js (953, 2019-01-30)
build\check-versions.js (1257, 2019-01-30)
build\dev-client.js (245, 2019-01-30)
build\dev-server.js (2460, 2019-01-30)
build\utils.js (1949, 2019-01-30)
build\vue-loader.conf.js (413, 2019-01-30)
build\webpack.base.conf.js (1734, 2019-01-30)
build\webpack.dev.conf.js (1225, 2019-01-30)
build\webpack.prod.conf.js (3742, 2019-01-30)
config (0, 2019-01-30)
config\dev.env.js (139, 2019-01-30)
config\index.js (1438, 2019-01-30)
config\prod.env.js (48, 2019-01-30)
index.html (279, 2019-01-30)
package-lock.json (316323, 2019-01-30)
package.json (2152, 2019-01-30)
src (0, 2019-01-30)
src\App.vue (4927, 2019-01-30)
src\assets (0, 2019-01-30)
src\assets\address (0, 2019-01-30)
src\assets\address\公众号.png (1535, 2019-01-30)
src\assets\address\新的朋友.png (1043, 2019-01-30)
src\assets\address\标签.png (1556, 2019-01-30)
src\assets\address\群聊.png (1079, 2019-01-30)
src\assets\find (0, 2019-01-30)
src\assets\find\bg-1.png (300941, 2019-01-30)
src\assets\find\bg.png (130630, 2019-01-30)
src\assets\find\小程序.png (1576, 2019-01-30)
src\assets\find\ɨһɨ.png (1200, 2019-01-30)
src\assets\find\ҡһҡ.png (2301, 2019-01-30)
src\assets\find\朋友圈.png (1926, 2019-01-30)
... ...
### Vue.js 2.0 实战项目
基于 Vue + Vuex + Vue-router + Webpack 2.0
打造微信界面,实现了微信聊天、搜索、点赞、通讯录(快速导航)、个人中心、模拟对话、朋友圈、设置等功能。
### 技术栈
- [x] MVVM框架:Vue.js 2.0
- [x] 状态管理:Vuex
- [x] 移动端组件库:Mint-ui
- [x] 前端路由:Vue-router
- [x] 数据交互:Vue-resource
- [x] 打包工具:webpack 2.0
- [x] 环境配置:node + npm
- [x] 语言:es6
### 项目运行
```
git clone https://github.com/sukizhao/wechat-by-vue.git
cd wechat-by-vue
npm install
npm run dev //服务端运行,运行后访问 http://localhost:6868)
npm run build //项目打包
```
### 项目预览
[点击这里预览项目](https://caochangkui.github.io/wechat-by-cck/index.html) (在chrome手机模式下预览)
### 移动端扫描下方二维码可直接打开
![](https://raw.githubusercontent.com/caochangkui/common-resources/master/wechat-img/code.png)
# 页面部分截图
### 微信聊天(每个联系人聊天后可自动添加到首页)
### 朋友圈、点赞
### 个人中心、相册、钱包、卡包、设置
# 项目树
```
.
├── README.md
├── build // 项目打包路径
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 上线项目文件
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json // 配置信息
└── src // 源码目录
├── App.vue // 输出文件
├── main.js // 入口文件
├── assets // 公用图片
├── base // 存放通用组件的组件库
│ ├── loading // 栏加载组件
│ └── scroll // 滑屏文件
├── components // 应用组件的组件库
│ ├── chat
│ │ └── chat.vue // 微信组件
│ ├── address
│ │ └── address.vue // 通讯录组件
│ │ └── address-detail
│ │ └── address-detail.vue // 通讯录详情组件
│ │ └── address-more
│ │ └── address-more.vue // 通讯录更多详情组件
│ ├── find
│ │ ├── find.vue // 发现组件
│ │ ├── find-circle
│ │ │ └── find-circle.vue // 朋友圈组件
│ │ ├── scan
│ │ │ └── scan.vue // 扫一扫组件
│ │ └── shake
│ │ └── shake.vue // 摇一摇组件
│ ├── me
│ │ ├── me.vue // 个人中心组件
│ │ ├── card
│ │ │ └── card.vue // 卡包组件
│ │ ├── money
│ │ │ └── money.vue // 钱包组件
│ │ ├── collection
│ │ │ └── collection.vue // 收藏组件
│ │ ├── album
│ │ │ └── album.vue // 相册组件
│ │ └── set
│ │ └── set.vue // 设置组件
│ ├── chatroom
│ │ └── chatroom.vue // 聊天窗口组件
│ │ └── chatroom-user
│ │ └── chatroom-user.vue // 聊天者的个人信息组件
│ ├── search
│ │ └── search.vue // 搜索组件
│ ├── plus
│ │ └── plus.vue // 更多组件
├── router
│ └── index.js // 路由控制中心
└── store // 存放vuex相关代码
├── actions.js // 异步操作,或对mutation做一些封装
├── getters.js // 获取state,并对其做一些映射
├── index.js // vuex入口文件
├── mutation-types.js // 存放与mutatiom相关的常量
├── mutations.js // 处理数据逻辑方法的集合
└── state.js // 管理所有状态
```
近期下载者:
相关文件:
收藏者: