前端小白项目vue h5总结

前言：我为什么要写这个笔记，第一是给自己的经验做一个积累，第二是总结自己遇到的问题，填过的坑以后不要在填哈哈~~~。

项目名称：远程认证 开发工具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 (项目名称)

有点不全，照这个样子，enter下去就可以创建一个vue项目

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标签，设置设备宽度以及缩放比例   

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] 这是我项目中的可以拿去替换

这句很重要，不加的话，px转换不了

5.安装后 可以npm run dev 运行就ok了

 6. 安装组件库我这里用到的是vant

 #通过 npm 安装npm i vant -S

 npm i babel-plugin-import -D  按需加载

后续要用到的例如键盘、下拉菜单、input，按照官方文档操作就好了

写到这里，来说说我遇到的坑

坑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 打开相机和相册

这样写：

在安卓里只能调取相册   ios只能调取相机，为了解决这个问题，我找了好久的解决办法终于找到了

解决办法：