# 第一个vue项目练习仓库

**Repository Path**: liqinyi/personal_practice_warehouse

## Basic Information

- **Project Name**: 第一个vue项目练习仓库
- **Description**: 第一个vue项目练习仓库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-02-14
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是第一个vue项目
##	希望能好好工作
##	有灵魂的代码
#  开源协议(MIT)
## 用传统方式修改过后的代码上传到码云
1. git add .
2. git commit -m "提交信息"
3. git push
## 制作首页APP组件
1. 完成Header区域,使用的是Min-UI 中的Header组件
2. 制作底部的Tabbar区域,使用的是MUI的Tabbar.html
	+ 在制作购物车小图标的时候,操作麻烦一些
	+ 先把扩展图标的css样式,拷贝到项目中
	+ 拷贝扩展字体库的ttf文件到项目中
	+ 为购物车小图标添加样式
3. 要在中间区域放置一个router-view 来展示路由匹配到的组件

## 改造tabbar为router-link
## 设置路由高亮
## 点击tabbar中的路由连接,展示对应的路由组件

## 制作首页轮播图布局
## 加载首页轮播图数据
 1. 获取数据,如何获取,使用axios,在node后台解决跨域问题
 2. 配置axios在main.js文件中的使用需要安装vue-axios插件 
 3. 在vue中注册使用 vue-axios 和 axios
 4. 获取到的数据要保存在data身上
 5. 使用v-for循环渲染每个item 项 注意设置 v-for 中的 :key 属性
 ## 新闻资讯页面制作
 1. 绘制页面,使用mui中的media-list模板
 2. 使用axios 获取数据
 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()方法
 
 ## 发表评论
 1. 把文本框做双向数据绑定
 2. 为发表按钮绑定一个事件
 3. 校验文本框内容是否为空,如果为空则Toast提示用户
 4. 通过axios发送一个请求,发送给服务器
 5. 当发表评论OK后,重新刷新列表,以查看最新的评论
	+ 当评论成功后,在客户端手动拼接出一个最新评论对象,然后调用数组的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
	});```
	+ 在滑动中会出现bundle.js:30 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
	+ 错误警告,需要在样式里面加上*{touch-active:pan-y} 但是首页和会员等滑动不了了
  4. 当滑动条调试OK后,发现tabbar无法工作了,这时候,我们需要把每个tabbar按钮的样式中,'mui-tab-item;重新改一下名字
  5. 获取所有分类,并渲染分类列表
### 制作图片列表区域
  1. 图片列表需要使用懒加载技术,我们可以使用mint-ui提供的现场组件`lazy-load`
  2. 根据`laze-load`的使用文档,尝试使用
  3. 渲染图片列表数据