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:true
             pathRewrite:{			//完事后将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>
        //动态计算rem
        document.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也很快就有了

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

2. 引入fastclick库来解决

点透bug的产生

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

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

解决方式：

1. 上下层都是tap事件，缺点：a标签等元素本身就是自带的click事件，更改为tap比较困难

2. 缓动动画，让上层元素消失的时候不要瞬间消失，而是以动画的形式消失，事件超过300ms就可以了

3. 使用中间层,添加一个透明的中间元素，给它添加click事件并消失，这个时候接收点透的是透明的中间层

4. 使用fastclick

移动端测试

1. 使用chrome浏览器有移动设备模拟功能，在这里可以做一些模拟测试，但是要注意的是，毕竟不是真机，会有一些测试不到的问题

2. 手机连接上电脑的无线，总之使其在同一个网络里，然后就可以通过ip访问

需要测试的浏览器：

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

移动端交互

动画效果全部使用css3

JQ生成二维码

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

兼容查阅网站

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