vue 头条 基于 **Vue 全家桶 ** 制作的今日头条 ，一个媲美原生的移动端新闻 App，支持用户登录，发表评论，收藏，关注。以及新闻栏目设置。
技术栈 【前端】
Vue：构建用户界面的 MVVM 框架，核心是响应的数据绑定和组系统件 vue-router：为单页面应用提供的路由系统，项目上线前使用了路由懒加载技术，来异步加载路由优化性能 axios：服务端通讯。 Vant*：轻量、可靠的移动端 Vue 组件库 less：less 预编译处理器 ES6：ECMAScript 新一代语法，模块化、解构赋值、Promise、Class 等方法非常好用
==============================================================================================================================
【后端及数据库】
Node.js：利用 Express 起一个本地测试服务器 Express：一个自身功能极简，完全是由路由和中间件构成一个的WEB开发框架 【自动化构建及其他工具】
vue-cli：Vue 脚手架工具，快速初始化项目代码 ESLint：代码风格检查工具，规范代码书写
==============================================================================================================================
: 收获 对 vue 的组件、指令、选项、模版渲染、事件绑定、计算属性等有了一定了解 了解了 vue 组件之间的交互、传值 熟悉了在 vue 项目中使用第三方插件（组件） 熟悉了组件化、模块化的开发思维 熟悉了 vue-router 控制路由和子路由的方式 再次熟悉项目开发流程：项目分析设计 -> 项目环境搭建 -> 依赖安装 -> 页面架构设计 -> 组件开发 -> 测试联调 -> 发布上线 总结了一套 Vue 通用组件，可以在其它项目中复用的 10+ 个基础组件、15+ 个业务组件 体会到组件化、模块化开发带来的便捷 学会利用过渡效果及动画效果制作良好的用户交互体验
==============================================================================================================================
📝 实现细节 主要功能：首页、注册、登录、个人中心、资料编辑、跟帖、评论、收藏、关注，视频播放、栏目管理，搜索新闻等等
==============================================================================================================================
首页 静态页面 主要使用flex布局完成本页面和组件的封装。
业务处理
1、使用vant的Tab 标签页组件，获取数据，遍历生成顶部标签
2、由于每次只需加载本栏目的数据，因此要对数据进行改造，在获取的每一条数据里添加postList数组，pageIndex，pageSize
3、监听当前栏目id，发送请求获取数据，存到自身的数组里,注意都是当前的栏目this active，参数传的也都是当前栏目的
4、封装新闻列表展示结构，通过type判断进行不同的展示
5、上拉加载 List 列表组件 主要操作：
①引用组件 ②加载时让页数++ 再次请求 ③数据请求完成后 需要手动重置属性 并把数据push到数组里
6、下拉刷新
①把数据清空，重新请求 ② 注意要重置，还有重置上拉加载的finished属性
==============================================================================================================================
注册 登录：
** 登录页思路：**
·通过flex布局完成静态页面布局 ·由于按钮和输入框在本项目多次使用，因此封装成组件，也可以直接使用vant组件上的组件
按钮封装思路：
+首先按钮的功能是点击和按钮内容 +使用div的原因是样式更多样化且按钮内容多样化， +通过slot完成按钮文字的变化通过父子组件的事件监听完成实现按钮的点击功能
输入框封装思路：
+首先按钮的功能：输入文本，有value，type，placeholder等属性，有input，blur等常用方法
+通过props属性接收父组件传递的值如正则，添加input事件对值进行判断添加不同的样式，通过双向绑定实现数据影响元素和元素影响数据
+添加失焦事件并进行正则判断，使用vant的轻提示给用户提示
+登录：设置全局的 axios 默认值，封装api接口文件，登录成功后跳转个人中心，跳转携带用户id方便后续操作
错误日志： Object(...) is not a function 检查引入是否有问题
个人中心： 根据id完成数据渲染
实现思路： +静态页面使用到之前封装的button组件，此页面可以继续封装cell，因为后面的编辑页面也有使用，也可以使用vant组件
+获取路由上的id 发送请求获取用户数据，渲染数到页面
+安全问题考虑：由于涉及客户登录，所以要在路由设置导航守卫，并在axios使用拦截器设置token，此处详情说明可以查看vue-router和Axios的官方文档，了解设置方式
+点击头部跳转用户编辑页面
错误日志
基本是拦截器设置不到位，会获取不到数据
==============================================================================================================================
资料编辑：
静态页面 引用vant组件及自己封装的组件组成
业务处理 功能：1、渲染原数据左箭头返回个人中心 √
2、点击头像，可以进行头像的修改 首先，监听确定键，完成图片的上传，且通过id完成用户资料的修改，并且实现预览效果，需要添加文件上传api和用户编辑api
3、点击昵称，引入vant的Dialog 弹出框和Field 输入框组件，监听确定键，完成昵称的修改，且实现预览效果
4、点击修改密码，引入vant的Dialog 弹出框和Field 输入框组件，使用该组件的一个beforeclose属性，判断： ①与原密码是否一致 ②新密码是否符合正则表达式规则
5、点击修改性别，引入vant的Picker组件，选中数据性别，监听用户选择，确认后完成修改
==============================================================================================================================
我的关注：
该页面和业务逻辑都比较简单
用之前封装的头部组件和flex布局完成静态页面的布局
业务处理： 1、mounted进来获取用户关注渲染页面， 2、用户点击取消关注，将当前的关注移出，通常刷新 页面是通过再次加载数据完成
新闻详情页：
用flex布局展示静态页面。
业务处理：
1、根据id拿到文章详情 渲染页面
2、封装底部评论栏，注意此处需要通过props向子组件传递数据
3、关注 √ 根据数据添加样式
4、点赞√ 根据数据添加样式
5、点击评论跳转 路由跳转携带文章id参数 方便下一步的操作
==============================================================================================================================