5

vue-md-cnode社区

项目地址:点此查看
预览地址:点此查看(使用chrome模拟手机查看)

基于vue全家桶的Material Design风格Cnode社区

尽量接近原生App的Material Design风格,参考了Google Play,Cnode的Android客户端。

技术栈

vue2 + vue-router2 + vuex + es6 + webpack + axios + scss + flex + vue-material

描述

  • 单页面应用:通过vue-router跳转

  • 状态管理:使用vuex实现组件通信,也有一些父子组件使用props通信

  • MD风格:使用vue-material组件库来实现高仿原生md风格

  • icons:使用Google官方的material design icon

  • markdown编辑器:mavonEditor

  • 无限滚动:vue-mugen-scroll 实现思路是滚动到底部使page加1,然后通过watch监听page的变化,再获取数据通过concat拼接到原列表

  • 移动端适配:在head标签通过js动态设置html标签的font-size,配合sass的自定义函数,具体可以参考这篇文章,使用方式比如width:100px;可以写成width:pr(100);

功能

  • [x] 登录

  • [x] 保存登录

  • [x] 注销

  • [x] 切换分类

  • [x] 主题列表

  • [x] 主题详情

  • [x] 滚动加载

  • [x] 发帖

  • [x] 回复

  • [ ] 回复某人

  • [x] 收藏

  • [x] 点赞

  • [x] 个人中心

  • [x] 消息

  • [ ] 消息已读

  • [x] 移动端适配

  • [x] 小尾巴

部分截图







tgxh
410 声望11 粉丝