vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题（六）

vue-cli的使用

现在使用前端工程化开发项目是主流的趋势，也就是说，我们需要使用一些工具来搭建vue的开发环境。一般情况下我们都会选择使用webpack进行项目的构建，在这里我们直接使用vue官方提供的，基于webpack的脚手架工具进行项目开发。

注意：要求node.js版本是8+

安装方法

全局安装vue-cli:
cnpm install -g @vue/cli
or
yarn global add @vue/cli
检测安装：
vue -V

脚手架创建项目

vue create 项目名称
这里如果你是第一次使用脚手架进行项目创建的话，是只有两项提示。
第一项是默认配置，我们一般选择第二项自定义配置进行项目构建。
我们可以自由的选择哪些配置，按键盘上下键进行选中，安装。
选中哪一个，通过键盘空格键确定，所有的都选择完毕后，按键盘的Enter键进行下一步。
需要注意的是：模板创建的时候会询问需要使用EsLint来标准化我们的代码规范，地址如下：
https://www.cnblogs.com/mingjian/p/9361027.html
如果sass安装失败的话，可以重新安装sass试一下
cnpm i node-sass
yarn直接装一遍：yarn
然后会报一次eslint的错，用yarn lint运行一下
然后yarn serve运行

关闭eslint

如果当前项目使用了eslint，并且需要关闭。需要创建vue.config.js文件，采用如下代码：

module.exports = {devServer: {overlay: {warnings: false,errors: false}},lintOnSave:false //直接关闭eslint检查
}

alias别名配置

configureWebpack: {resolve: {alias: {'assets': '@/assets',      //@直接选择src文件'con': '@/components','views': '@/views',}}
}

proxy代理配置

devServer: {open:true, //自动开启浏览器port:8000, //随便改端口号proxy: {'/api': {target: 'https://*.*.com',host: '*.*.com',changeOrigin:truepathRewrite:{           //完事后将api开头的去除掉，变为空'^/api':''}}}
}

axios异步的方法

axios.get("地址"，{headers:{请求头}
}).then(res=>{console.log(res)})//第二种
axios({url:"地址",method:"请求方式",headers:{请求头}
}).then(res=>{console.log(res)})

css样式设置：scoped、/deep/或>>>穿透

<!--1.scoped属性只能限制样式在当前组件可以用原理：就是给当前组件的标签上面添加了额外的一些属性，不仅仅根据class匹配了，还可以同时根据属性选择器进行匹配2.在标签上面可以支持lang属性  例如可以使用sass语法（css的预处理语言）进行高效的css代码的编写scoped的穿透 子组件或者第三方插件的某些样式需要用到了,使用/deep/进行穿透如果对于普通的css样式来说的话，用  >>> 语法即可
-->
scss语法
<style scoped lang="scss">.helloworld /deep/ p{color:skyblue;}
</style>普通css样式
<style scoped>.helloworld >>> p{color:skyblue}
</style>

移动端媒体查询、12格栅系统

/*通过media媒体查询标签，根据不同的分辨率显示不同效果*//*当浏览器的窗口小于等于1500px的时候就变色*/@media screen and (max-width:1500px){div{background:red}}@media screen and (max-width:1000px){div{background:orange}}

col-xs-6（移动端） col-sm-6（iPai端） col-md-6（中等屏幕，比iPad大一点） col-lg-6（超大屏）
12格栅系统后面数字的计算方法：12 / 后面数字 = 几列
div.col-xs-6.col-sm-4 (移动端显示两列，ipad端显示3列 12栅格系统)

动态设置rem

dbr（设备像素缩放比）=物理像素（设备像素）/ 逻辑像素（css像素）
计算动态的font-size = 逻辑像素（css像素）/ 设定rem（表示视口的总宽） + “px”
如下

<script>//动态计算remdocument.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px"window.onresize = function(){document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px"}</script>

通过meta标签来设置viewport

标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

meta标签大全

1px边框问题

连接：1px边框
在移动端中，如果给元素设置一个像素的边框的话，那么在手机上看起来是会比一个像素粗的。
解决方法：使用伪类元素模拟边框，使用transform缩放
利用transition：scaleY（0.5）进行缩放
dpr为2缩放0.5，为3的话缩放0.333
响应式图片为题
当图片外面的元素加宽的话，内部的图片就玩会变形
解决方法：让图片最大只能是自己的宽度

img{max-width: 100%;display: block;margin: 0 auto;
}

移动端事件

移动端中的事件和PC的事件有一些是不同的，例如，mouse部分事件在移动端里没有了
取而代之的是touch事件：
touchstart/touchmove/touchend/touchcancel（玩游戏忽然来电话）
添加事件的时候可以用ontouchstart，但是有的时候很可能失效，建议使用addEventListener的方式
touchcancel比较少见，在系统取消触摸的时候触发
touch事件对象里面的属性和mouse的略有不同，例如在mouse事件里可以直接从事件对象里取出pageX,clientX,screenX
touch事件对象里有touches,changedTouches,targetTouches三个属性，上面保存着关键的位置信息
它们里面保存的是触发事件的手指的信息，但是要注意，虽然三个里面保存的信息看似都一样，但是在touchend事件里，只能使用changedTouches

click的300ms延迟问题

在移动端中，click事件是生效的，但是它有一个问题，点击之后会有300ms的延迟响应

原因：safari是最早做出这个机制的，因为在移动端里，浏览器需要等待一段事件来判断此次用户操作是单击还是双击，所以就有click300ms的延迟机制，Android也很快就有了

不用click，用自定义事件tap
tap是需要自定义的：如果用户执行了touchstart在很短的时间又触发了touchend，且两次的距离很小，而且不能触发touchmove
使用zepto类库的时候，里面自带tap事件,，但是需要在zepto.js后面加上一段js
zepto官网;Touch模块
百度有一款touch.js的插件教程
hammer.js也是一个手势事件库文档
引入fastclick库来解决

点透bug的产生

点透bug有一个特定的产生情况：

当上层元素是tap事件，且tap后消失，下层元素是click事件。这个时候，tap上层元素的时候就会触发下层元素的click事件

解决方式：

上下层都是tap事件，缺点：a标签等元素本身就是自带的click事件，更改为tap比较困难
缓动动画，让上层元素消失的时候不要瞬间消失，而是以动画的形式消失，事件超过300ms就可以了
使用中间层,添加一个透明的中间元素，给它添加click事件并消失，这个时候接收点透的是透明的中间层
使用fastclick

移动端测试

使用chrome浏览器有移动设备模拟功能，在这里可以做一些模拟测试，但是要注意的是，毕竟不是真机，会有一些测试不到的问题
手机连接上电脑的无线，总之使其在同一个网络里，然后就可以通过ip访问

需要测试的浏览器：

chrome，firefox，UC,百度，QQ，微信，Android，safari

移动端交互

动画效果全部使用css3

JQ生成二维码

可以使用jquery.qrcode.js插件，可以快速的生成基于canvas绘制的二维码

兼容查阅网站

can i use ,在这里可以查看很多属性、api的兼容性