0%

用Vue实现一个简易的cNode中文社区

这个项目是我之前利用下班的时间弄的Vue版cNode中文社区,当然,因为我以前的技术栈是React,所以也用React实现了同样的功能,后面学习了angular后,抑制不住自己的好奇心,所以也用angular实现了一遍,后期我会把React和angular版本的分享出来。从三大框架去实现cNode中文社区的过程中,我发现难易程度其实差不多,看完vue/react/angular的官方文档后,就可以动手写代码了,涉及到vuex/vue-router、redux/react-router等的使用的时候,是可以一边查文档一边写代码的,用不同的框架去实现,也能让自己对三大框架各自的设计理念有更直观的感受,由于实现的cNode中文社区功能也还不是很丰富,涉及到的主要知识点也就以下几个,但是对于初学者来说,掌握这些完全够用了:

  • 组件化开发,需要考虑的一个是组件细化的粒度大小,另一个就是父组件与子组件之间的数据传递
  • 由于是单页面应用,所以需要知道路由之间如何跳转以及它们之间如何传参
  • 全局状态管理以及状态的持久化处理,有些数据状态我们是需要在不同的组件或者页面之间共享的,例如用户的登录状态,所以这个时候我们就可以借助vuex/redux/NgRx去管理这些数据,由于这些数据是存储在内存中,所以页面一刷新的时候就会被释放掉,造成先前保存的数据状态丢失了,所以我们还需要借助其他工具进行数据持久化的处理,如vue的vuex-persistedstate,不过我在使用vue实现cNode中文社区的时候,还未使用其他工具持久化处理,只是简单地借助localstorage进行处理。

这个简易版本的cNode中文社区,已经实现的功能如下:

  • 帖子列表展示
  • 帖子详情
  • 登录功能
  • 帖子收藏与取消收藏
  • 评论点赞
  • 发表帖子
  • 用户主页

接下来也会对这些功能做下一版本的的迭代和优化,以及还需要实现评论的功能。涉及到的技术栈如下:

  • vue
  • vuex:数据状态管理
  • vue-router:路由跳转
  • axios:帖子的数据请求
  • better-scroll:由于此次实现主要是面向移动端,所以使用了这个滑动体验比较好的开源插件
  • vue-material:我个人一直都比较喜欢material设计风格,所以这个简易版vue我也使用了vue版的material
  • vue-quill-editor:vue版富文本编辑器,发布帖子的时候使用

首页展示效果如下:项目代码地址:https://github.com/xiaoweihuang/vue-material-cnode

运行代码

clone代码到本地

1
$ git clone https://github.com/xiaoweihuang/vue-material-cnode.git

安装依赖

1
$ npm install

运行项目

1
$ npm run dev