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 // 管理所有状态 ```

近期下载者

相关文件


收藏者