# vue001

**Repository Path**: codemaners/vue001

## Basic Information

- **Project Name**: vue001
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-08-20
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是一个项目

## [主流开源协议之间有何异同?](https://blog.csdn.net/xiaodaima2016/article/details/83645854)

## 开始

## 用传统方式把修改后的代码上传到码云

  1. git add
  2. git commit -m "提交信息"
  3. git push

## 制作首页 APP 组件

  1. 完成 Header 区域，使用的是 Mint—UI 中的 Header 组件
  2. 制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbar.html
    1. 在制作购物车小图标的时候，操作会多一些
    2. 先把扩展图标的 css 样式，拷贝到项目中
    3. 拷贝字体库 ttf 文件到项目中
    4. 为购物车小图标，添加样式  `mui-icon mui-icon-extra mui-icon-extra-cart`
  3. 要在中间区域放置一个 router-view 来展示路由匹配到的组件

## 改造 Tabbar 为 router-link

## 设置路由高亮

## 点击 Tabbar 中的路由链接 展示对应的路由组件

## 制作首页轮播图布局

## 加载首页轮播图数据

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

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

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

## 新闻资讯 页面制作

  1.绘制界面  使用 MUI 中的 media-list.html
  2.使用 v-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.comments() 方法 ，重新获取最新一页的数据
  3.为了防止 新数据 覆盖老数据的情况，我们在 点击加载更多的时候，每当获取到新数据，应该让 老数据 调用数组的 concat 方法，拼接上新数组

## 发表评论

  1.把文本框做双向数据绑定
  2.为发表按钮绑定一个事件
  3.校验评论内容是否为空，如果为空，则提示用户评论内容不能为空
  4.通过 vue-resource 发送一个请求，把评论内容提交给服务器保存
  5.当发表评论 ok 后，重新刷新列表，以查看最新的评论
    + 如果调用 comments 方法 重新刷新列表 可能只得到最后一页的评论 前几页的评论得取不到
    + 换一种思路：当评论成功后，在客户端，手动拼接出一个最新的评论对象，然后调用 数组的 unshift 方法，把最新的评论追加到 data 中 comments 的开头，这样就能完美实现刷新评论列表的需求

## 改造图片分析 按钮 路由的链接并显示对应的组件页面

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

  1.制作 顶部的滑动条
  2.制作 底部的图片列表

### 制作顶部滑动条的坑

  1.需要借助于 MUI 中的页面 tab-top-webview-main.html
  2.需要去掉 slider 区域的 mui-fullscreen 类 
  3.滑动条无法正常触发，通过官方文档，发现这是 js 组件，需要被初始化一下
    + 导入 mui.js
    + 调用官网提供的方式去初始化
      mui('.mui-scroll-wrapper').scroll({deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006})
  4.我们在初始化 滑动条 的时候，导入的 min.js，但是，控制台报错
    + 经过我们合理的推测 可能是 js 中用到了 'caller' 'callee' 'arguments'，但是 webpack 打包好的 bundle.js 中默认是启用严格模式的 所有 这两者冲突了
    + 解决方法：1.把 mui.js 中的 非严格模式 的代码改掉，但是不现实 2.把 webpack 打包时候的严格模式禁用掉
    + 最终使用第二种方式 移除严格模式 使用这个组件
      babel-plugin-transform-remove-strict-mode
  5.刚进入图片分享页面的时候，滑动条无法正常工作，经过我们认真的分析，如果要初始化滑动条，必须要等 DOM 元素加载完毕 所以我们把初始化滑动条的代码放到 mounted 生命周期函数中
  6.当滑动条调式 ok 后，发现 tabbar 无法正常工作了，这时，我们需要把每个 tabbar 按钮的样式中 `mui-tab-item` 重新改一下名字
  7.获取所有分类，并渲染分类列表

### 制作图片列表区域

  1.图片列表需要冷加载技术 我们可以使用 mint-ui 提供的 `lazy-load`
  2.根据 `lazy-load` 的使用文档，尝试使用
  3.渲染图片列表数据

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

## 实现了 点击图片 跳转到 图片详情页面

  1.在改造 li 成 router-link 时候 需要使用 tag 属性指定要渲染位 哪种元素

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

## 实现 图片详情 中缩略图的功能

  1.使用插件 vue-preview 这个缩略图组件
  2.获取所有的图片列表，然后使用 v-for 指令渲染数据
  3.注意 img 标签上的 class 不能去掉
  4.注意 每个图片数据对象中，必须有 w 和 h 属性

## 绘制 商品列表 基本结构

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

  1.要保证自己的手机可以正常运行
  2.要保证 手机 和 开发项目的电脑 处于同一个 WiFi 环境中，也就是说 手机 可以 访问到电脑的 IP
  3.打开自己的 项目中 package.json 文件，在 dev 脚本中，添加已一个 --host 指令，把当前电脑的 WiFi IP 地址，这只为 --host 的指令值
    + 如何查看自己电脑所处 WiFi 的 IP呢，在 cmd 终端运行 `ipconfig` 查看无线网的 IP 地址