# learning-vue-app

**Repository Path**: weirdocc/learning-vue-appbox

## Basic Information

- **Project Name**: learning-vue-app
- **Description**: Vue的练习项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是一个Vue的项目 

主要的使用的技术栈有vue,vuex,mint-ui,mui,vue-resource,vue-router, 项目的入口文件是``src/main.js``,路由管理在``src/router.js``。   

主要完成的模块有：    

- 首页App组件
	- 首页信息导航(Home.vue)  

- 新闻资讯news组件
	- 新闻列表（NewsList.vue）  
	- 新闻信息（NewsInfo.vue）

- 图片分享photos组件
	- 图片列表（PhotoList.vue）
	- 图片详情（PhotoInfo.vue） 

- 购物车shopcar组件   

- 公共组件
	- 评论（Comment.vue）
	- 轮播图(Lunbotu.vue)  
	- 数字按钮

-------------------------------------

## 注意 

1. 制作Header区域，使用的是Mint-UI的Header组件。
2. 制作Tagbar区域，使用的是MUI的 Tagbar.html。
	- 注意添加相应的图标样式和图标字体的引用。  
	- 注意添加相应的图标类名。    
3. 要在中间区域放置一个 router-view，来展示路由匹配的组件。

## 设置Tabbar的路由

## 设置首页轮播图（使用Swipe, SwipeItem插件）

## 加载轮播图数据  

1. 获取数据，使用vue-resource.
2. 获取到的数据要保存到data上。   
3. 使用v-for循环渲染每个item项。  

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

使用MUI的栅格栏

## 新闻资讯的路由链接 和 新闻资讯模块的构建   

渲染数据，格式化时间，这里使用到了一个全局的过滤器dataFormat，这个过滤器使用了moment.js格式化模板。

## 新闻资讯列表点击跳转到新闻详情。

## 获取到评论的数据，展示到comment组件里

## 实现点击加载更多 ，绑定数据，请求下一页的数据。 

**注意请求数据时，使用数组拼接关联之前的数据**

## 图片列表

1. 在初始化滑动条时，导入了mui.js,控制台报错，由于在严格模式下，不可以使用'callee','caller','arguments',它和webpack打包好的bundle.js之间冲突了。    
	- 在mui.js改掉。
	- 在webpack打包时的严格模式禁用掉。**babel-plugin-transform-remove-strict-mode**插件  

2. 首次页面加载，划块无法滑动。   
	- 如果要初始化滑动条，必须等DOM加载完毕。如果要操作元素，最好在mounted里面初始化，这时候的DOM元素是最新的。

滑动时会有一些警告，可以通过样式
```
* { 
		touch-action: pan-y;  	
	}
```   

## 图片懒加载(lazy-load)   

当使用Mint-UI里的lazy-load时，需要全部导入组件，如果按需导入，无法实现懒加载缓冲的图片

## 图片预览(vue-preview)
版本更新后需要绑定``:slides``和``@close``,之前的用法已经失效。
注意： **必需要在methods声明一个close绑定的方法，可以什么都不做，但必须声明。**

## 区分this.$router 和this.$route   

``this.$route``: 是路由参数对象,所有路由中的参数 param,query都属于它。        		
``this.$router``:  是一个路由导航对象，用它可以方便的使用JS代码实现路由的前进和后退、跳转到新的URL地址。   


在跳转路由的时候，可以使用普通标签跳转和JS编程式导航。   
JS编程式导航： 可以给一个元素标签添加一个事件，通过this里的router对象来控制。
``this.$router.push()``, 它可以传递字符串、对象、命名的路由（name是路由规则里定义的name,并且还可以传递一个params参数对象）   

## 父组件向子组件传值时的注意事项

当父组件传值给子组件的时候，**若所传递的值是一个从Promise异步获取到的，它在传递给子组件的时候，可能还未成功从服务器取得数据，此时会传递给子组件一个undefined**。   

解决方法：    
可以在子组件中添加``watch``来监听父组件传递过来的值，不管watch触发几次，但最终肯定是一个合法的值。

## 如何从购物车中获取商品的数量  

1. 创建一个空对象，循环购物车里的数据，在生成一个模板对象,将Id与Count值一一对应。    

``` 
	{
		id: count
	}
```  

2. 将生成的对象传递给子组件。

### 项目的服务器端接口 ``http://www.liulongbin.top:3005/api`` 特别感谢B站的小伙伴