vue2全家桶写的material design风格的cnode社区

孙吉亮发布于2019-08-20 18:00 / 1535人阅读

摘要：社区项目地址点此查看预览地址点此查看使用模拟手机查看基于全家桶的风格社区尽量接近原生的风格，参考了，的客户端。

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] 小尾巴

部分截图

云服务器 GPU云服务器 material-design material-design-lite cnode php写的接口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83996.html

2017-07-15 前端日报

摘要：前端日报精选从设计到源码用强类型语言增强通过一个场景实例了解前端处理大数据的无限可能专题之从零实现的表单验证第一部分使用和技巧对表单进行约束验证中文译即将到来的正则表达式新特性掘金个快速编程技巧个人文章周刊第期相信控制像一样使用 2017-07-15 前端日报精选 Redux从设计到源码用强类型语言GraphQL增强React通过一个场景实例了解前端处理大数据的无限可能JavaSc...

Vicky 2019-08-20 18:01 评论0 收藏0
用vue全家桶写一个“以假乱真”的网易云音乐

摘要：关于路由，刚开始设计路由的时候想了很多，由于一开始的目标就是网易云音乐的所有内容，所以设计了三级路由，，大概这样，点击查看。标题略夸张了，但是这个从ui还原上已经很接近官方版本了。虽然目前这个是很多人造过的轮子，但是可能每个人的实现方式都不一样，自己写一遍也会有许多收获。项目地址预览地址 api：ap使用的是一个开源的nodejs封装的网易云音乐api，地址技术栈 vue...

clasnake 2019-08-20 18:19 评论0 收藏0
较流畅的Vue2版CNode社区WebApp（附源码）——欢迎交流反馈

摘要：版社区假若本项目能给到你一点点帮助，求在线地址扫码二维码体验更佳推荐满大街的重写，这个有什么亮点比较接近原生体验流畅的加载过渡效果舒服细腻的样式布局合理的列表渲染优化为什么还要重写版的主要是练手，熟悉全家桶超级好用组件库，做一个最佳实践案例 Vue2版CNode社区WebApp 假若本项目能给到你一点点帮助，求Star！ Github：https://github.com/Ryqsky...

yunhao 2019-08-20 14:25 评论0 收藏0