需求分析

 

## 制作首页App组件

1. 完成 Header 区域，使用的是 Mint-UI 中的Header组件

2. 制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbar.html

 + 在制作 购物车 小图标的时候，操作会相对多一些：

 + 先把 扩展图标的 css 样式，拷贝到 项目中

 + 拷贝 扩展字体库 ttf 文件，到项目中

 + 为 购物车 小图标 ，添加 如下样式 `mui-icon mui-icon-extra mui-icon-extra-cart`

3. 要在 中间区域放置一个 router-view 来展示路由匹配到的组件

 

## 改造 tabbar 为 router-link

 

## 设置路由高亮

 

## 点击 tabbar 中的路由链接，展示对应的路由组件,

+ 导入组件

+ 路由匹配规则

+ 路由模式 hash/ history

 

## 制作首页轮播图布局

 

## 加载首页轮播图数据

+ 在生命周期created 时期，初始化数据

1. 获取数据， 如何获取呢， 使用 vue-resource

2. 使用 vue-resource 的 this.$http.get 获取数据

3. 获取到的数据，要保存到 data 身上

4. 使用 v-for 循环渲染 每个 item 项

 

## 改造 九宫格 区域的样式

 

## tabbar 切换动画

+ 给router-view 包裹 transition

+ .v-leave  .v-enter-to {} 进入 100%  离开 -100%

+ .防止变型 overflow-x: hidden

+ .抖动 leave  positon:absloute

+ .v-leave-active,.v-enter-active {}

+ transiton transform translateX

 

 ## 改造新闻资讯 路由链接

 + router-link  to === path 相对应

 

 ## 新闻资讯页面制作

 + 绘制界面 

 1.  media-list.html  display:flex  just- space-between

 + 获取数据

 1. Vue.filter('dataFormate',(dataStr,partten='YYYY-MM-HH' HH:mm:ss))

 2. 时间处理  定义全局的过滤器  return  moment(dataStr).formt(partten)  

 + 渲染真实数据

 ## 实现 新闻资讯列表 点击跳转到新闻详情页面

 + 将列表的每一项改造成 router-link 同时跳转的时候，提供唯一的id :to="'/home/newsList/'+itenm.id"

 + 创建新闻详情的组件页面 

 + 在路由模块中，将新闻详情的路由地址和组件页面对应起来

## 新闻详情页

 + 基本布局

 + 请求接口 ，传递参数 id  先获取传递来的参数 this.$route.params.id

 + 参数 +this.id 

 + 得到的数据，渲染到页面 

## 封装一个单独的comment评论组件

1. 先创建一个评论子组件

2. 在需要评论子组件的页面，手动导入

3. 在父组件中使用，comonents属性，将刚刚导入的组件，注册为自己的组件

4. 将注册子组件时候的注册名称，以标签形式在页面引入

 

## 获取所有的评论数据，显示在页面

+ 详情页的id，通过list父组件 ，使用属性绑定，传给子组件 。子组件通过props接收数据

+ 接收数据以后，子组件，就拥有了id。然后再拼接到pageIndex

+ 将数据渲染在页面

## 实现点击加载更多评论的功能

1：为加载更多按钮，绑定加载事件，在事件中，请求下一页数据

2. 点击加载更多，让pageIndex++，重新调用评论方法

## 发表评论

+ 把文本框数据做双向绑定

+ 为发表评论按钮绑定事件

+ 校验评论内容，如果评论内容为空，toast提示用户，评论内容不能为空

+ 通过axios发送请求，把评论内容交给服务器

+ 发表评论ok后，刷新列表，查看最新评论

+ 通过unshift,将最新的评论追加到comments的开头

## 图片分享

1. 坑

+ 制作顶部滚动条 tab-top-webview-main.html 去掉full

+ 滑动条无法正常触动滑动，通过检查官方文档，发现是js组件，需要初始化一下

+