# webpack_vue_xm

**Repository Path**: qiuhc/webpack_vue_xm

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-10-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#这是我接触vue框架的第一个项目

#第二次提交时，写了页面的基本按钮，页面切换的动画，具体看代码


#第三次提交

1.1 在加载评论更多按钮哪里，concat()会在原始数组后面添加新数据，而不会覆盖原有数据
1.2 所有评论数据包括文章主题内容都只是写在文件里进行存储，然后用vue-resource的get请求访问，获取到的数据在渲染出来的
1.3 发表评论unshift方法是向数组前面添加数据，原来的数据不会被清除

##图片分享顶部的滑动选项使用mui快速布局

	1.踩到顶部的滑动选项的坑，需要把mui-fullscreen类去掉
	2.想让div区域滚动需要导入mui.min.js,然后加入
、、、、、、、、、、、、、、
	===初始化滚动条
	mui('.mui-scroll-wrapper').scroll({
		deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		scrollX:false //横向滚动
	});
、、、、、、、、、、、、、、
之后又会弹出错误提示
////////////////
Unable to preventDefault inside passive event listener due to target being treated as passive
////////////////
解决方式：
		* { touch-action: pan-y; }加入这个样式即可
3.但再次进入分享页面时，滑动条区域又无法正常滚动
	3.1 原因是因为页面还没渲染完成，dom操作mui-scroll-wrapper类时并无法在页面找到此类
	解决方案：把初始化滚动条的代码加入到mounted(){}生命周期函数就解决了
4.这时我们发现底部导航选项又不起切换作用了
	解决方案：加入此代码
			import mui from './lib/mui/js/mui.min.js'
			mui('body').on('tap','a',function(){document.location.href=this.href;});//手机版代码
			mui('body').on('click','a',function(){document.location.href=this.href;});//电脑版代码
			再加一条样式：
						* { touch-action: pan-y; }
			解决办法来源于：详见https://blog.csdn.net/qq_34129814/article/details/79015150
5.移除webpack打包严格模式，使用此插件 babel-plugin-transform-remove-strict-mode

## 图片分享使用mint-ui的组件Lazy load 实现
	1.过程和中使用懒加载技术，遇到的问题，懒加载效果没有效果，
		解决方案：只需将mint-ui改为全局导入即可



## 开发中遇到的bug

	1.用vue-router的get请求遇到的错误提示
	Uncaught (in promise) TypeError: Cannot read property 'status' of null at VueComponent.eval
    分析：一般都是你要访问的地址文件语法写错了（注意中英文字符，结尾不能加,）

##未解决问题
	在购物车页面中使用到Mint-ui的Switch（开关）按钮不起作用