首页 > 云开发 > JavaScript > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

Vue2.0—仿知乎日报总结

JavaScript

Vue-News

一个基于vue全家桶开发的仿知乎日报单页应用

项目github地址:源码地址

项目在线地址:在线地址 (PC模式下推荐使用chrome移动端模式浏览去观看)

如果觉得做得还不错 , 或者项目源码对您有帮助 , 希望您小抬右手到右上角点一个star , 您的支持是作者长期更新维护的动力^_^

项目起源

从二月份开始学习vue学习了一个半月后去跟着滴滴黄轶老师学习他的Vue.js高仿饿了么外卖App课程,做完后收获颇丰,对vue的实际项目应用有了基本的了解,同时也学习到了移动端布局,例如flex,1px边框,正方形背景图等等,做完整个课程后决定自己再去做一个小东西去加深巩固vue知识数,因此又花了数天去阅读vuex,vue-router,axios,以及饿了么前端团队开发的mint-ui,最后在博哥的推荐下选择了仿知乎日报作为独立demo的prototype,原因吗很简单,标准的单页面应用,没有太多复杂的交互效果,以及现成的api接口,然后,就开工啦!

项目划分

项目主要划分为7个页面模块

首页 (HomePage),收藏页(Collect),新闻详情页(NewDetail),评论页(Comments),主题新闻页(ThemeDetail),主编列表页(EditorsList)和主编个人页(Editor)

以及

侧边栏(Sidebar),滑动图(Swipe),新闻列表页(HomePageDetail),详情页底部工具栏(BottomMenu),头部(Header),子页面头部(SonHeader)

项目技术总结

除了使用到mint-ui,axios,vue-router这些组件库和插件以外,还有一个非常重要的vuex,所有非父子组件通信,甚至部分父子组件通信都使用到他,到后期解决bug第一时间想到的也是采用vuex解决

上面的截图就是我定义的全部状态,7个页面定义了将近30个状态,做到了非父子组件需要用同一种状态但是又不互相影响的效果

所有源码欢迎到我的github察看,也欢迎各位点一个Star,你的一个star就是对我的莫大鼓励

文章来源:segmentfault,作者:哈哈哈蜜瓜。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索