- git add .
- git commit -m "提交信息"
- git push
- 完成 Header 区域,使用的是 Mint-UI 中的Header组件
- 制作底部的 Tabbar 区域,使用的是 MUI 的 Tabbar.html
- 在制作 购物车 小图标的时候,操作会相对多一些:
- 先把 扩展图标的 css 样式,拷贝到 项目中
- 拷贝 扩展字体库 ttf 文件,到项目中
- 为 购物车 小图标 ,添加 如下样式
mui-icon mui-icon-extra mui-icon-extra-cart
- 要在 中间区域放置一个 router-view 来展示路由匹配到的组件
- 获取数据, 如何获取呢, 使用 vue-resource
- 使用 vue-resource 的 this.$http.get 获取数据
- 获取到的数据,要保存到 data 身上
- 使用 v-for 循环渲染 每个 item 项
- 绘制界面, 使用 MUI 中的 media-list.html
- 使用 vue-resource 获取数据
- 渲染真实数据
- 把列表中的每一项改造为 router-link,同时,在跳转的时候应该提供唯一的Id标识符
- 创建新闻详情的组件页面 NewsInfo.vue
- 在 路由模块中,将 新闻详情的 路由地址 和 组件页面对应起来
- 先创建一个 单独的 comment.vue 组件模板
- 在需要使用 comment 组件的 页面中,先手动 导入 comment 组件
import comment from './comment.vue'
- 在父组件中,使用
components
属性,将刚才导入 comment 组件,注册为自己的 子组件 - 将注册子组件时候的,注册名称,以 标签形式,在页面中 引用即可
- 为加载更多按钮,绑定点击事件,在事件中,请求 下一页数据
- 点击加载更多,让 pageIndex++ , 然后重新调用 this.getComments() 方法重新获取最新一页的数据
- 为了防止 新数据 覆盖老数据的情况,我们在 点击加载更多的时候,每当获取到新数据,应该让 老数据 调用 数组的 concat 方法,拼接上新数组