Vue 版 CNode 社区 (一)

Author Avatar
ldq 6月 20, 2017
  • 在其它设备中阅读本文章

Vue 版 CNode 社区介绍

预览地址

预览地址

手机可访问二维码

Vue 版 CNode

源码

GitHub

起因

做 Vue 版 CNode 社区的原因：

1. 学习 Vue 全家桶构建项目
2. CNode 社区提供了 API
3. 做一个属于自己的 CNode 社区，当然仅限于前端

技术栈

  • Vue2.2: [ 前端框架 ]
  • Vuex: [ 状态管理, 组件通信 ]
  • Vue-router: [ 配置路由，组件切换 ]
  • Vue-lazyload: [ 图片懒加载 ]
  • ES6/7: [ JS 版本 ]
  • Webpack: [ 模块化处理，编译打包 ]
  • Express: [ 服务器 ]
  • Axios: [ 基于 Promise 处理 HTTP 请求 ]
  • SASS(SCSS): [ css 预处理器 ]
  • Normalize.css: [ 处理浏览器默认样式 ]
  • Font-awesome: [ 字体图标 ]
  • Moment.js: [ 处理时间显示 ]
  • Simplemde: [ markdown 编辑器 ]
  • Highlight.js: [ 语法高亮 ]
  • Flex: [ 弹性布局 ]
  • Canvas: [ 首页 loading 效果，按钮的波纹效果 ]
  • loaclStorge: [ 本地存储用户信息 ]

项目结构

项目结构思维导图

效果图

001

002

003

004

成果

实现了
登录 (使用官方提供的 access token 方法登录)，
回复，发帖，（支持 Markdown）
滚动加载更多，（监听 scroll 事件）
收藏，点赞，
查看消息，（支持已读消息和未读消息）
更换主题色，(利用 Vuex，四种主题色可更换)
退出登录
查看个人信息

问题

  • 没有下拉刷新
  • 图片点击查看大图不支持手指缩放，
    导致移动端看大图体验差
  • 利用 Vuex 实现的更换主题色方法比较繁琐，
    考虑是否有其他更优的方法
  • 项目结构有待改善，
    纯组件和视图组件应分开，
    sass 文件单独出来，没有利用到 scoped
    vuex 没有分模块

未来

改善问题
优化代码

下一篇

Vue 版 CNode 社区 (二)

感谢 CNode 社区提供 API 供人学习

参考资料

Vue 文档 : https://cn.vuejs.org/v2/guide/
CNode API: https://cnodejs.org/api

许可协议: "署名-非商用-相同方式共享 4.0"

本文链接：http://ldq-first.github.io/2017/06/20/Vue版CNode社区-一/