No, every programmer is bald.

首页

制作首页中的App组件

1. 完成Header 区域，使用的是Mint-UI中Header组件
2. 制作底部的Tabbar 区域，使用的是MUI的 Tabbar.html
   • css 样式
   • ttf文件
3. 要在中间区域放置一个router-view来展示路由匹配到的组件
   • 添加样式

加载首页轮播图数据

1. 获取数据，vue-resource
2. 使用vue-resource 的this.$http().get获取数据
3. 获取数据保存到data身上
4. 使用v-for循环渲染每个item项

新闻资讯页面

新闻资讯页面制作

1. 绘制界面 使用MUI中的mui-list
2. 使用vue-resource获取数据
3. 渲染真实数据

改造新闻资讯， 路由链接

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

1. 把列表中的每一项改造为router-link， 同时，在跳转的时候应该提供唯一的Id标识符
2. 创建新闻详情的组件页面 NewsInfo.vue
3. 在路由模块中，将新闻详情的路由地址和组件页面对应起来

实现新闻详情的页面布局和数据渲染

单独封装一个comment.vue子组件

1. 先创建一个单独的comment.vue组件模板
2. 在需要使用comment组件的页面中，先手动导入comment组件 'import comment from './comment.vue'
3. 在父组件中 使用'components'属性，将刚才导入的comment组件注册为子组件
4. 将注册子组件，以标签引用到页面中

获取所有的评论数据，显示到页面中

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

1. 为按钮绑定事件，在事件中，请求下一页数据
2. 点击加载更多，让pageIndex++ 然后重新调用this.getComments方法,获取最新一页数据
3. 为了防止新数据，覆盖老数据的情况，我们再点击加载更多的时候，每当获取新数据，应当让老数据调用，concat方法，拼接新数组

发表评论

1. 为文本框做双向数据绑定
2. 为发表按钮绑定事件
3. 校验评论内容是否为空，如果为空，则提示用户评论内容不能为空
4. 通过vue-resource发送请求把评论内容提交至服务器
5. 当发表评论后，重新刷新页面，查看最新的评论
   • 如果调用getComments方法，重新刷新评论列表，可能只能得到最后一页的评论
   • 当评论成功后，在客户端，手动拼接出一个最新的评论对象，然后调用数组的unshift方法，把最新的评论追加到data中comments的开。

绘制图片列表 组件页面结构并美化样式

制作顶部滑动条的坑

1. 借助于tab-top-webview-main.html

2. 需要把slider区域的mui-fullscreen类去掉

3. 滑动条无法正常触发滑动，检查官方文档，是JS组件，需要初始化

4. 导入MUI.js

5. 调用官方提供的方式初始化

   ... mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值 0.0006 }); ...

6. 我们在初始化滑动条时，控制台报错

   • 把mui.js 中的非严格模式的代码改掉
   • 把webpack打包时候的严格模式禁用

7. tabbar无法正常工作，原因为是类名冲突，在源文件css中替换所有的mui-tab-item类名为mui-tab-item-new

8. 获取所有分类，并渲染所有分类列表

制作图片列表区域

1. 图片列表使用懒加载技术，mint-ui现成组件 lazy-load
2. 根据lazy-load使用的方式，尝试使用
3. 渲染图片列表数据

实现图片列表的懒加载改造和样式美化

实现图片跳转至详情页面

• 改在li为router-link时，需要使用tag属性指定要渲染为哪种元素

实现详情页面的布局和美化，同时获取数据渲染页面

实现图片详情页中 缩略图功能

• 使用vue-preview

绘制商品列表页面基本结构并美化

尝试在手机上，去进行项目的预览和测试

1. 保证手机正常运行
2. 保证手机和开发项目电脑，处于同一个wifi环境中，手机需要访问到电脑IP
3. 打开自己的项目中，package.json文件，在dev脚本中添加一个 --host指令，把当前电脑主机wifiIP地址，设置为--host的指令值
4. 如何查看电脑所处wifiIP，在cmd终端中，运行 ipconfig,查看无线网的IP地址