这个项目是我之前利用下班的时间弄的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 |