银赚头条是一个新闻聚合网站平台，该平台通过海量信息采集、深度数据挖掘和用户行为分析，该平台主要涉及新闻推送、看新闻赚金币等功能，集热点头条、搞笑内容、娱乐内容为一体，为用户提供社会热点、娱乐新闻、搞笑段子等服务。项目主要技术栈（前端）：vue.Js+vue-cli全家桶+vue-router+vantUi框架+git（版本控制）+vuex+axios+amfe-flexible( rem适配)项目职责：主要负责项目中登录模块、文章列表模块、频道模块的页面展示和功能实现项目步骤 ：1. 通过Vue-cli创建基础的项目结构，删除现有的文件并调整目录结构，通过git操作，把本地的新分支推送到远程2.安装第三方包postcss-pxtorem、amfe-flexible以及一个基于 promise 的 HTTP 库axios。配置postcss-pxtorem，把页面px单位自动转成rem单位，提高开发效率。3.创建组件views/login/index.vue，然后在router/index.js中配置路由表，实现登录页面结构布局和css样式，其中用到vantui中的NavBar导航栏、Form表单4.由于项目中有些接口需要权限才能访问，所以在项目中将token保存在vuex中, 本地新建存储模块并将token做持久化处理，通过localStorage进行token保存。5.登录模块完成后,对文章信息模块进行组件化开发,首先进行页面的基础布局,通过van-cell、van-grid和van-image组件实现6.通过父子传值动态绑定+props,接收到父组件请求回来的数据,进行页面渲染.渲染页面的表层数据用插值表达式即可渲染，部分复杂数据需要利用到VUE中的作用域插槽进行赋值（slot-scope），在列表中使用v-for进行赋值，这三种可以实现表层数据赋值7.实现下拉刷新和上拉加载功能,主要实现原理是,在下拉刷新时,会触发refresh事件,在事件的回调函数中进行同步或者异步操作,操作完成后,再将加载状态数据更改成false完成加载功能8.对页面中渲染的时间内容, 进行相对时间的处理, 其中用到dayjs并且配合vue中的过滤器,来完成时间的转换，在main.js中全局注册使用过滤器9.由于文章列表模块的功能较为复杂,所以新建moreAction组件进行实现.,然后在父组件中使用此组件,文章操作功能对于已经登陆的用户，可允许他们去关闭某篇文章，或者是反馈内容。10.实现文章不感兴趣功能,在moreAction组件中抛出事件,调用接口, 实现对数据的删除, 主要通过eventBus(事件总线)实现跨组件消息传递,在父组件index.vue中发布事件,然后在子组件中监听事件11.封装频道管理组件, 点击触发弹层, 通过查阅接口发现, 进行添加频道时需要传入对应的文章编号, 在获取文章编号时用到了$route.params获取路由信息中的文章编号 代码优化：1.在加载文章列表时，对其中的图片进行懒加载处理：并不是一开始就加载全部的图片，而当某张图快要进入可见区域时，再去加载。可以避免http请求时同时加载完所有资源，导致性能下降。2.设置了路由拦截处理，阅读vue-router文档发现导航守卫功能，便将此段代码封装至路由的js文件中，从而实现路由导航守卫功能BUG解决：1.在moreAction中，如果是在这种状态退出的，则下次再打开时，它也是这个状态。原因是isReport被设置成了true，对于这个bug解决方法是通过在父组件中修改子组件数据即可，使用$ref解决2.最大安全值的处理,由于后端回传的真实id是19位的数值，超过了js能表达的最大安全整数，所以要引入一个额外的包JSONBig来处理这个问题。