# vue-git-demo

**Repository Path**: longlivey/vue-git-demo

## Basic Information

- **Project Name**: vue-git-demo
- **Description**: 测试git
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-10-16
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是一个手机页面项目

## 基于Vue2.6,使用到了MINT-UI和mui组件

## 用传统方式(命令行)把修改后的代码上传到码云
1. git add .
2. git commit -m "提交信息"
3. git push

## 制作首页App组件
1. 完成Header区域，使用的是 Mint-UI 中的Header组件
2. 制作底部的Tabbar区域，使用的是 MUI 的 TAbbar.html
 + 在制作购物车 小图标的时候,操作会相对多一些:
 + 先把扩展图标的css样式,拷贝到项目中
 + 拷贝 扩展字体库ttf文件,到项目中
 + 为购物车小图标添加样式
3. 要在中间区域放置一个 route-view 来展示路由匹配到的组件


## 改造tabbal为router-link

## 设置路由高亮

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

## 制作首页轮播图布局

## 加载首页轮播图数据
1. 获取数据,使用vue-resource
2. 使用 vue-resource 的 this.$http.get获取数据
3. 获取到的数据,要保存到data身上
4. 使用v-for 循环渲染每个item项目

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

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

## 新闻资讯 页面制作
1. 绘制界面 使用MUI中的media-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. 校验评论内容是否为空,如果为空,则Toast提示用户 评论内容不能为空
4. 通过vue-resource 发送一个请求, 把评论内容提交给服务器
5. 当发表评论完成后,重新刷新列表,以查看最新的评论
 + 如果调用通过getComments 方法重新刷新评论列表,可能只能得到最后一页的评论,前几页的评论获取不到
 + 换一种思路: 当评论成功后,在客户端手动拼接出一个最新的评论对象,然后调用数组的unshift方法,把最新的评论追加到data中comments的开头;这样就能完美实现刷新评论列表的需求

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

 ## 绘制图片列表 组件页面结构并美化样式
 1. 制作 顶部的滑动条
 2. 制作 底部的动态列表
 ### 制作顶部滑动条的注意事项:
 1. 需要借助于MUI中的tap-top-webview-main.html
 2. 需要把slider区域的 mui-fullscreen 类去掉
 3. 滑动条无法正常触发滑动,根据官方文档说明,需要初始化组件
  + 导入mui.js
  + 调用官方提供的方式去初始化:
   ```
   mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
   ```

 4. 我们在初始化滑动条的时候,导入的mui.js,但是,控制台报错:mui.min.js:940 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode
  + mui.js用到了'caller', 'callee'和'arguments',但是webpack打包好的bundle.js中默认启用严格模式,所以这两者冲突了;
  + 解决方案: 1.把min.js中的非严格模式的代码改掉;但是工作量太大;2.禁用webpack打包时候的严格模式 
  + 采用第二种方法 移除严格模式:使用插件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

 ## 测试重新安装系统后Git是否配置成功