# vue-review

**Repository Path**: wyzCodes/vue-review

## Basic Information

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

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# this is a vue project

## let's get start

## 上传到码云的传统方式
1. git add .
2. git commit -m "提交信息"
3. git push

## 制作首页app组件
1. 使用 Mint-UI 中的 Header 组件完成 header 区域
2. 使用 MUI 的 Tabbar.html 完成底部 Tabbar 区域
    * 制作购物车时先导入 css 及 ttf 到项目目录中
    * 再添加相应的类名
3. 在中间区域放置一个 router-view 来展示路由匹配到的组件

## 把 tabbar 改为 router-link

## linkActiveClass 属性设置 tabbar 高亮

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

## 获取首页轮播图数据
1. 使用 vue-resource 获取数据

## 改造 九宫格 区域样式

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

## 新闻资讯 页面制作
1. 绘制页面，使用 MUI 中的 media-list.html
2. 使用 vue-resource 获取新闻列表数据
3. 渲染真实数据

## 实现点击查看 新闻详情 
1. 新闻列表中每一项为一个 router-link, 跳转时传递唯一的 id 标识符
2. 创建新闻详情组件页面
3. 指定对应路由

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

## 单独封装一个 评论子组件
1. 创建一个单独的 comment.vue 子组件
2. 在需要使用的页面中，手动导入 comment 组件
    * import comment from './comment.vue'
3. 在父组件中，使用 'components' 属性，导入 comment 子组件，注册为自己的 子组件
4. 将注册子组件时的注册名称，以 标签形式 在页面中引用

## 获取所有评论数据

## 实现点击加载更多评论
1. 按钮绑定事件，请求下一页数据
2. 让 pageIndex++，在执行一次 getCommentList 方法
3. 点击加载更多通过 concat 让老数据数组拼接到新数据数组后面

## 发表评论
1. 文本框双向数据绑定
2. 按钮添加事件
3. 校验评论内容是否为空
4. 通过 vue-resource 发送请求将评论提交服务器
5. 成功后刷新评论列表
    * 若调用 getCommentList 方法重新刷新评论列表，可能只能得到最后一页的数据，之前的获取不到
    * 解决方法：评论成功后在客户端手动拼接最新评论对象，将其拼接至开头

## 改造 图片分享 路由链接

## 图片分享 页面制作
1. 制作顶部滑动条，使用 MUI 中的 tab-top-webview-main.html，注意删掉slider 的 mui-fullscreen 类
2. 导入 MUI 的 JS 文件，初始化
    * 注意初始化后报错，分析后得知 mui.js 中用到了 'caller','callee','arguments'，webpack 在打包时，bundle.js 中，默认启用严格模式，二者冲突了
    * 解决方案：把 webpack 打包时候的严格模式禁用了，使用此插件 babel-plugin-transform-remove-strict-mode
3. 进入页面后发现 滑动条 无法正常工作，分析后得知 滑动条 初始化必须要等到 DOM 元素加载完毕后，所以初始化的代码要放进         mounted 周期函数中
4. 上一步问题解决后发现底部 tabbar 无法切换，需要把 tabbar 的 mui-tab-item 类名重新改名

### 制作图片列表区域
1. 图片记载使用 mint-ui 的懒加载 lazy-load
2. 渲染列表数据

### 实现图片列表的懒加载个样式

## 实现 点击图片 跳转 图片详情
1. 将 li 改为 router-link 时，tag 属性值写为 li

## 图片详情页面布局，获取数据渲染页面

## 实现图片详情 缩略图 功能
1. 使用 vue-preview 插件
2. 获取图片列表，渲染数据
3. 注意：img 标签上的 class 类名不能少
4. 注意：每个图片数据中，必须有 w 和 h 属性

## 在手机上进行项目的预览及测试
1. 保证电脑和手机处于同一个 wifi 中
2. 在 package.json 中，在 dev 脚本中，添加一个 --host 指令，把当前电脑的 wifi IP 地址，设置为 --host 的指令