清爽型的Cnode社区webapp面世了。。。
发布于 3 个月前 作者 fengyinchao 1866 次浏览 来自 分享

一个Vue2版Cnode社区webapp

1、 先看效果图

手机端扫码,pc端点击这里,github地址在这里,喜欢就给star吧~ 二维码.png

2、 主要功能

1、炫酷入场动画,loading加载动画
2、权限验证,即未登录用户不能随便跳转页面(vue-router实现)
3、从主页跳往详情页,再从详情页返回时恢复到原来状态(sessionStorage实现)
4、自写vue插件实现全局提示和回到顶部功能
5、登录、发表话题、查看消息、查看话题等基本功能

3、 技术栈

1、vue2+vue-router2-vuex2全家桶
2、axios,作为替代vue-resource的数据请求模块(尤大大推荐的)
3、flexible.js,font-size+rem的移动适配库
4、reset.css,animate.css,iconfont.css,github-markdown-
   css,fastclick.js,zepto.js一些工具类库

4、心得

        首先感谢Cnode社区提供的API。
        做这个项目的初衷是想完整走一遍vue全家桶流程,当然这个目的是达到了,
    但是我感觉收获最大的并不是这个,而是移动端的适配问题,不仅搞明白了
    适配的原理(font-size+rem),还对flex布局等理解更加深刻了。此外
    还有很多收获,比如做数据缓存,一些git操作,一些sbulimetext插件,
    以及webpack工具的运用等。

5、未来开发计划

    目前基本功能都已实现,后期还想在该应用上继续优化,包括:
    1、做服务端渲染(SSR),解决SEO和首次加载缓慢问题;
    2、尝试做成最近较火的渐进式渲染(PWA)应用;

6、 最后

    谢谢大家阅读,希望一起交流,共同进步!(据说给了star的小伙伴更容易打通奇经八脉以及任督二脉,功力大增~~~)

后记:还有一丢丢功能没完成,我已经迫不及待要展示给你们看了。。

27 回复

😂😂 我也在用 vue 写 cnode 社区,vue 大赞

来自酷炫的 CNodeMD

真是乐此不疲啊

@1renhaO 谢谢😊 自豪地采用 CNodeJS ionic

@Harveytwo 相互交流😜 自豪地采用 CNodeJS ionic

@hxh1246996371 很有成就感,哈哈😊 自豪地采用 CNodeJS ionic

哎,确实不新鲜了,作为个人练手确实不错

flexible.js好上手吗?好不好用啊

https://fengyinchao.github.io/v-cnode 重定向到https://fengyinchao.github.io/v-cnode/home后,刷新404

@kidbai,我发现了,但是还不知道什么原因,可能跟github有关,我在本地刷新时没问题

好像所有的回复时间都是3分钟之前

@1renhaO 求star啊~~

@liygheart 是的,对这些时间还没处理,在想用moment.js

@1340641314 谢谢,不过我觉得不是缺少404页面这个问题

@luogue 就是一个js文件,代码也就60多行的样子,可以去看

@fengyinchao 因为路由没有匹配上,不是github的问题

@kidbai,我设置过默认路由,如果都不匹配会重定向到首页的,而且我在本地刷新不存在这个问题呀,所以我觉得是github page的问题,暂时不知道咋解决

@Mwangzhi 给颗star呗~

无非就是为了 star

@Lizhooh 对新手还是有帮助的啦😄 自豪地采用 CNodeJS ionic

 ---from [Vue + Muse-UI](https://github.com/mov1er/cnode-code)

星星辣么多,好嫉妒

来自带提醒的颜cnode

@zhanzhenzhen 哈哈,大家给面子

回到顶部