使用Vue写一个cnodejs社区的webapp以后的反思

前言

终于抽出了时间来完成我这个断断续续的项目了，当时最开始是想作一个知乎日报webapp的，不过因为API跨域和图片的跨域问题，当时处理起来不顺手，就改作cnode的了，由于官方提供了API同时也容许跨域，真的是很是感谢cnodejs社区提供的API

反思一 组件重用

当时拿到API以后直接开始撸起了首页，当时以为也就几个页面就能完成，页面太多的细分组件，彻底按照页面去完成的，不过当写的到后面发现，有很多地方均可以提取出来做为组件去调用的。好比主题的列表展现，评论以及我的中心的主题等。当拿到一个项目以后应先花写时间去找找哪有类似的地方，将其提取出来作成组件去调用。

反思二 样式文件

起初是按照组件和模板的方式，将样式文件写在了vue文件中。因为以前看过大漠的文章介绍过postcss，因而在此次项目中一开始使用了postcss去写样式，由于其中的next插件可让咱们使用css4中的一些特性去实现某些样式。好比变量，组件化，颜色函数等。写了一些后发现将样式混入到组件中确实看起来很方便，可是当我定义变量，进行导入时，发现并非很顺手，并且postcss的使用也并无带给我超越scss的体验。权衡了利弊以后便切换回了scss，并将文件所有提取到一个文件夹中进行组件化管理。带个个人方即是能够分离来写样式和结构，也能够进行一些主题的更改。不即是当要更改一个组件时，我可能改完vue还要去找scss。至于那种方便，应该是仁者见仁，或是根据项目需求了吧。

反思三 组件间的数据传递

首先用户的登陆信息无疑是要保存在官方的状态管理vuex中了，固然为了保存也要存在localStorage中了。父级组件向下传递使用prop。而头部标题栏，侧滑菜单和回复评论时的显示隐藏上，状态的切换。由于都是作成了组件，而数据传递时首先想到了放到vuex中，经过getter去获取状态的变化。而评论框的显隐采用的是子组件向父组件经过$emit传递事件，从而达到关闭其余评论框的目的。

反思四 数据保存还原

因为是单页应用，而数据则是来自ajax，当页面切换时，数据应该用去主动获取数据并渲染，而当页面回退时，应该回到上次浏览的位置，而这个功能vue-router提供了方法。然而数据的保存应该如何去作呢，当时还没想好解决方案，留待慢慢研究下。

反思五 后端渲染ssr

前端的数据均来自ajax的话，那么初次加载时便要去请求数据，影响了相应时间和SEO，而如今Vue ssr 的技术也愈来愈成熟，Vue2.3将ssr的有了很大的性能提示。那么下一个目标即是将项目升级为后端渲染！

最后

项目地址
在线浏览