# vue001

**Repository Path**: suppose/vue001

## Basic Information

- **Project Name**: vue001
- **Description**: 这是我看黑马程序员学到的第一个VUE项目，是一个移动端的项目，视频虽然是18年的视频，但是老师讲的不错，过程中一些版本性的问题也都已经解决，所以感觉进步还是有的
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-29
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是我的第一个 VUE 项目

## 我是一个有灵魂的程序员

### 第二天的一次修改测试

## 2020/4/30 制作首页 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 中的路由链接，展示对应 i 的路由组件

## 制作首页轮播图布局

## 加载首页轮播图数据

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

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

## 改造新闻咨询路由链接

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

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

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

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

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

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

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

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

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

## 发表评论

    1.把文本框做双向数据绑定
    2.为发表按钮绑定一个点击事件
    3.效验评论内容是否为空，如果为空，则 Toast提示用户，评论内容不能为空
    4.通过 vue-resource 发送请求，把评论内容提交给服务器
    5.当发表评论OK后，重新刷新页面，获取最新评论
        + 如果调用 getComments 方法重新刷新评论列表的话，可能只能得到最后一页的数据，前几页的评论获取不到
        + 换一个思路：当评论成功后，在客户端，手动拼接出一个最新的评论对象，然后调用数组的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.在初始化 滑动条的时候，导入的 mui.js 如果爆出了一个错误（当前我这里是没有爆出错误的）
        + 解决方案：
        1. cnpm install babel-plugin-transform-remove-strict-mode -D
        2. 在 babelrc 中的 plugins 中 新增 "transform-remove-strict-mode" 来取消严格模式
        3. 解决谷歌浏览就报错问题
            ```
                *{
                    touch-action: pan-y;
                }
            ```
    5.刚进入图片分享页面的时候，滑动条无法正常工作，这是因为 滑动条的初始化 创建在了我们页面的 DOM元素创建之前，所以此时我们的滑动条虽然已经被创建，但无法通过 DOM 来进行操作，需要将初始化创建放大我们的 mounted 声明周期函数中
    6.当 滑动条 调试OK后，发现，tabbar 无法正常工作了，这时候，我们需要把 每个 tabbar 按钮样式中的类名 'mui-tab-item'，重新改一下名字  'mui-tab-item-syq'
    7.获取所有分类，并渲染列表；
    




### 制作图片列表区域
    1.图片列表需要使用懒加载技术，我们可以使用 Mint-UI 提供的现成的组件 'lazy-load'
    2.根据`lazy-load`的使用文档，进行使用
    3.渲染我们的图片列表数据

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

### 实现了点击图片 跳转到 图片详情页面
    1.再改造 li 成为 router-link 的时候，使用 tag 属性，指定我们的 router-link 渲染为 li 标签

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

### 实现 图片详情中 缩略图的功能
    1.使用插件 vue-preview 这个缩略图插件
    2.获取到所有的图片列表，然后使用

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

## 尝试再手机上去进行项目的预览和测试
    1.要保证自己的手机可以正常运行
    2.要保证 手机 和 开发项目的电脑，处于同一个 WIFI 环境中，就是说手机可以访问到电脑的 IP
    3.打开自己项目中的 package.json文件，在 dev 脚本中，添加一个 --host指令，把当前电脑的 WIFI IP 地址，设置为--host 的指令值
     + 如可查看自己电脑所处的 IP呢，在 cmd 终端中运行：`ipconfig`，查看无线网的 IP 地址