前言：我为什么要写这个笔记，第一是给自己的经验做一个积累，第二是总结自己遇到的问题，填过的坑以后不要在填哈哈~~~。
项目名称：远程认证 开发工具vscode 框架 vue+vant h5
第一步：使用vue 脚手架工具 vue-cli 创建项目 网上有很多教程可以搜。
1.安装node.js
安装后可以打开cmd 输入node -v 显示版本号，说明安装成功
2.安装webpack
打开cmd 输入npm install webpack -g全局安装
3.安装vue-cli
npm install vue-cli -g
4.创建项目
vue init webpack (项目名称)
5.开发工具打开，控制台npm run dev 运行就可以看到以下这个页面
第二步，安装自己所要用到的插件，ui框架。
1.因为做h5要考虑到自适应，安装一个px自动转换成rem 的插件。
2. 下载 npm i lib-flexible --save 在 main.js 引入 import 'lib-flexible/flexible'
3. index.html 通过meta标签，设置设备宽度以及缩放比例 <meta name="viewport" content="width=device-width, initial-scale=1.0">
4.npm install px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}
在generateLoaders方法中添加px2remLoader
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] 这是我项目中的可以拿去替换
5.安装后 可以npm run dev 运行就ok了
6. 安装组件库我这里用到的是vant
#通过 npm 安装npm i vant -S
npm i babel-plugin-import -D 按需加载
写到这里，来说说我遇到的坑
坑1. 关于input file 上传图片
需要实现的效果是（点击一张图片就是我上传图片要显示的位置），要做一个类型判断，只有类型为true的时候，弹出一个提示框，提示框里面的按钮，就会拉取文件上传,当第二次来div点击上传的时候要去掉提示。
首先是样式，我用的是一个div 包裹着 input 和img 给input设置定位和宽、高，让它完全覆盖掉图片的位置，再设置透明度，就OK了。
如果这个时候我只写input 的change事件的话，就会遇到，提示和判断都不执行，因为input 直接就触发了拉取上传文件的操作，所以我把提示和判断的事件写在了外层的div的click上，当我点击div时，就会触发直接两个事件，这样肯定是不对的，最开始我想的是给div 做 一个默认行为的阻止（.prevent），和只能执行一次（.once）这样的话第一次可以达到效果，但是还存在问题。
解决办法：给div做事件，在它的事件里面，先做判断，在做提示，在通过this.$ref去触发input的事件，这样就OK了。
坑2. input file 打开相机和相册
这样写：<input type="file" accept="image/png,image/jpeg,image/jpg" capture="camera">
在安卓里只能调取相册 ios只能调取相机，为了解决这个问题，我找了好久的解决办法终于找到了
解决办法：<input type="file" ref="textfile" accept="image/*"@change="fileChange" style="opacity: 0；/>就ok了
坑3.input 拍照无法上传，相册上传OK。
又遇到这个问题的时候，我真的是很崩溃了，到处百度，有的说 要压缩后上传，但是我问过后台我是不是要压缩才能上传，后台说不用，百度其余的也没有说遇到过这个问题，问了朋友 叫我用vant里面的文件上传，我试了，也是上传不了，作为一个没有经验的我，开始慌了，不知道怎么办了。这个时候我想到会不会是后台限制了上传的文件大小。
解决办法：后台更改我上传大小的限制就OK了，如果上传的太慢，记得做一个加载中的动画，不要让用户觉得无任何响应而去一直点。
坑4.键盘的定位，遇上样式兼容
关于style样式： 键盘我用的是vant里面的键盘，样式的话，自己修改就可以了，修改组件的样式时可以重写一个<style>修改组件的样式</style> 因为<style scoped></style>只能对这个页面有用对引入的组件是无效的，当然<style></style>里在修改样式会变为全局，也就是另一个vue文件里面用的时候会影响样式。
建议使用<style scoped> 写在这里面 使用 >>> 穿透来修改 .包裹组件的div（是你自己写）>>> .组件的class </style>这样就OK了，而且另一个页面使用时候不会有影响，但是如果这个样式你每个页面都会用到，建议写在<style></style>里，这样就不会写重复的样式了。
关于键盘定位：因为这个定位是组件写了positon:fixed固定定位所以屏幕太小，或者浏览器打开，键盘会遮挡你上面的东西，浏览器的底部工具栏也会把你的键盘往上挤导致样式与设计图不一致。
解决办法，给页面高度最外层的div的高度100%改成100vh利用媒体查询，来设置css就OK了，具体就要细调了。
还有补一个 this.$route.query.name;可以获取地址带的参数 例如：http://.....?id=66; this.$route.query.id就可以在
created() {
打印 （this.$route.query.id）; 控制台就可以看见你拿到的id了
},
坑5.input 单选框，样式对不齐旁边的文字，当然这个样式在ios上对齐的时候，安卓上可能对不齐我用的办法是，我当时没有找到合适的办法就把input变成div这样就好调整啦。
这个项目就告一段落了。
