这是一个可以发表故事,可以聊天的网站,我定义为社交网站,它只是一个demo,纯属个人凭空设计。
vue2 + vuex + vue-router + webpack + ES6/7 + axios + less + flex +socket.io
git clone https://github.com/SunnyTuZi/vue2-story
cd vue2-story
npm install 或 yarn(推荐)
npm run dev
访问地址:https://localhost:8080/
由于本系统用的不是静态数据,所以要跑起来的话,还需要搭配后台运行。后台项目传送地址。
同时我们也提供了基于react&antd
搭建的后台管理页面传送地址
学习不是一天两天的事,希望大家多点耐心哟~
如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! ^_^
或者您可以 "follow" 一下,我会不断开源更多的有趣的项目
- 个人中心 -- 完成
- 修改个人信息 -- 完成
- 发表故事 -- 完成
- 评论故事 -- 完成
- 评论分页 -- 完成
- 点赞&踩故事 -- 完成
- 收藏故事 -- 完成
- 上传头像 -- 完成
- 创建聊天分组 -- 完成
- 单人聊天 -- 完成
- 多人聊天 -- 完成
- 关注话题-- 完成
- 发表话题故事-- 完成
- 登录、注册 -- 完成
- 修改密码 -- 完成
- 故事详情页 -- 完成
- 关注用户-- 完成
- 我的动态 -- 完成
- 我的收藏 -- 完成
1、这也算是初稿,自己完成的一个东西,可能页面不好看,或者功能不完善,也会有bug,也请大家多多体谅。
1、用koa2构建的后台系统。地址在这里
2、用react构建后台管理页面 地址在这里
所以我的目的是构建一个横跨前后端,vue2和react的项目,让大家可以多样化学习
。。。敬请期待
.
├── build // webpack配置文件
├── config // 项目打包路径
├── showImages // 项目截图
├── src // 源码目录
│ ├── components // 公用组件
│ │ ├── comment
│ │ │ ├── List.vue // 评论列表组件
│ │ ├── footer
│ │ │ ├── footer.vue // 公用底部
│ │ ├── header
│ │ │ ├── Header.vue // 导用头部
│ │ ├── pageTurner
│ │ │ ├── Page.vue // 分页组件
│ │ ├── picker
│ │ │ ├── chatBubble.vue // 聊天气泡组件
│ │ │ ├── comment.vue // 评论输入框组件
│ │ │ ├── SendMsg.vue // 信息输入发送组件
│ │ │ ├── Timep.vue // 年月选择器
│ │ │ ├── Town.js // 地区选择器
│ │ ├── story
│ │ │ ├── Item.vue // 故事列组件
│ │ ├── topic
│ │ │ ├── Item.vue // 话题列组件
│ │ ├── user
│ │ │ ├── Index.vue // 用户封面组件
│ │ │ ├── Item.vue // 用户列组件
│ │ ├── cellDetail
│ │ │ └── cellDetail.vue // cell组件
│ ├── config // 基本配置
│ │ ├── env.js // 环境切换配置
│ │ ├── fetch.js // 获取数据
│ │ ├── mUtils.js // 常用的js方法
│ │ └── rem.js // px转换rem
│ ├── images // 公共图片
│ ├── pages
│ │ ├── bubble
│ │ │ ├── AddGroup.vue // 添加分组
| | | ├── Chat.vue // 群组聊天
│ │ │ └── List.vue // 分组列表
│ │ ├── msg
│ │ │ └── List.vue // 消息列表
│ │ ├── search
│ │ │ └── Searcg.vue // 搜索页
│ │ ├── story
│ │ │ ├── Add.vue // 发表故事
| | | ├── Detail.vue // 故事详情
│ │ │ └── List.vue // 故事列表
│ │ ├── topic
│ │ │ |── Detail.vue // 话题详情
│ │ │ |── List.vue // 话题列表
│ │ ├── user
│ │ │ └── Continer.vue // 容器
│ ├── router
│ │ └── index.js // 路由配置
│ ├── service // 数据交互统一调配
│ │ ├── apiList.js // 获取数据的统一调配文件,对接口进行统一管理
│ ├── store // vuex的状态管理
│ │ ├── action.js // 配置actions
│ │ ├── getters.js // 配置getters
│ │ ├── index.js // 引用vuex,创建store
│ │ ├── mutation-types.js // 定义常量muations名
│ │ └── mutations.js // 配置mutations
│ ├── until
│ │ ├── axios.js // axios再次封装
│ │ ├── common.js // 公共js函数
│ │ ├── editor.js // 文本输入框editor配置
│ │ ├── px2rem.js // rem适配
│ │ └── localStorage.js // 据本地储存公共函数
│ └── public
| │ └── font // 字体图标
| │ └── style // 公共样式文件
| │ ├── mixin.less // css公用函数
| │ └── common.less // css公用样式
│ ├── App.vue // 页面入口文件
│ ├── main.js // 程序入口文件,加载各种公共组件
├── index.html // 入口html文件
.