# cfer-vue

**Repository Path**: ccf2019/cfer-vue

## Basic Information

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

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是一个项目

## 每一行代码有诗意

## 我们是有灵魂的程序员

#### 编不下去了,hahaha

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

## 制作首页App组件
1. 完成Header区域，使用的是Mint-UI中的Header组件
2. 制作底部的Tabbar区域，使用的是mi的Tabbar. html
	+在制作购物车小图标，操作要多一些：
	+先吧扩展图标的长沙市、样式，拷贝到项目中
	+拷贝扩展字体库ttf文件，到项目中
	+为购物车小图标，添加如下样式 '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

## 改造9宫格样式


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

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

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

 ## 绘制图片列表 组件页面结构并美化样式
	 1. 制作顶部的滑动条
	 2. 制作底部的图片列表
	 ### 制作顶部滑动条的坑
	 1. 借住与mui中的mui-master/examples/hello-mui/examples/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文件，但是，控制台报错：
	 + 推测：可能是 mui.js中用到了 caller，callee ，arguments ，但是，webpack打包好的bundle.js中，默认是启用严格模式的，所以，这俩者冲突了
	 + 解决方案：1.把mui.js中的非严格模式改掉 
	 			2.把webpack打包时候的严格模式禁用掉
	 			选择第二种方案：移除严格模式
	 			第一步：装包 cnpm i babel-plugin-transform-remove-strict-mode -D
	 			第二步：配置.babelrc文件 添加 plugins:["transform-remove-strict-mode"]
	 5. 刚进入图片分享页面的时候，滑动条无法正常工作，分析：如果要初始化滑动条，必须要等DOM元素加载完毕，所以，
	 	我们把初始化滑动条的代码，搬到了mounted生命周期函数中；
	 6. 发现tabbar无法正常工作了，这是需要把每个tabbar样式的mui-tab-item类重新改名字；
	 7. 获取所有分类，并渲染分类列表；

 ### 制作图片列表区域
 	1. 图片列表需要使用懒加载技术，我们可以使用mint-ui提供的组件 lazy-load
 	2. 根据lazy-load的文档使用
 	3. 渲染

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

## 实现了点击图片跳转到图片详情页面
1. 在改造li成router-link的时候，需要tag属性指定要渲染的元素

## 实现详情页面的布局和美化

## 实现图片详情中缩略图的功能
1. 使用插件vue2-preview这个缩略图插件
2. 每个图片数据对象中，必须有w和h属性

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

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