前言：我為什么要寫這個筆記，第一是給自己的經(jīng)驗做一個積累，第二是總結(jié)自己遇到的問題，填過的坑以后不要在填哈哈~~~。
項目名稱：遠(yuǎn)程認(rèn)證 開發(fā)工具vscode? ?框架? vue+vant? h5?
第一步：使用vue 腳手架工具 vue-cli 創(chuàng)建項目? 網(wǎng)上有很多教程可以搜。
?1.安裝node.js
?安裝后可以打開cmd 輸入node -v 顯示版本號，說明安裝成功
?2.安裝webpack??
?打開cmd 輸入npm install webpack -g全局安裝
?3.安裝vue-cli?
npm install? vue-cli -g
4.創(chuàng)建項目
vue init webpack (項目名稱)
5.開發(fā)工具打開，控制臺npm run dev 運行就可以看到以下這個頁面
第二步，安裝自己所要用到的插件，ui框架。
1.因為做h5要考慮到自適應(yīng)，安裝一個px自動轉(zhuǎn)換成rem 的插件。
2. 下載 npm i lib-flexible --save 在 main.js 引入 import 'lib-flexible/flexible'
3. index.html? 通過meta標(biāo)簽，設(shè)置設(shè)備寬度以及縮放比例? ?<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. 關(guān)于input? file 上傳圖片
需要實現(xiàn)的效果是（點擊一張圖片就是我上傳圖片要顯示的位置），要做一個類型判斷，只有類型為true的時候，彈出一個提示框，提示框里面的按鈕，就會拉取文件上傳,當(dāng)?shù)诙蝸韉iv點擊上傳的時候要去掉提示。
首先是樣式，我用的是一個div 包裹著 input 和img 給input設(shè)置定位和寬、高，讓它完全覆蓋掉圖片的位置，再設(shè)置透明度，就OK了。
如果這個時候我只寫input 的change事件的話，就會遇到，提示和判斷都不執(zhí)行，因為input 直接就觸發(fā)了拉取上傳文件的操作，所以我把提示和判斷的事件寫在了外層的div的click上，當(dāng)我點擊div時，就會觸發(fā)直接兩個事件，這樣肯定是不對的，最開始我想的是給div 做 一個默認(rèn)行為的阻止（.prevent），和只能執(zhí)行一次（.once）這樣的話第一次可以達(dá)到效果，但是還存在問題。
解決辦法：給div做事件，在它的事件里面，先做判斷，在做提示，在通過this.$ref去觸發(fā)input的事件，這樣就OK了。
坑2. input file 打開相機和相冊
這樣寫：<input?type="file"?accept="image/png,image/jpeg,image/jpg"? ?capture="camera">
在安卓里只能調(diào)取相冊? ?ios只能調(diào)取相機，為了解決這個問題，我找了好久的解決辦法終于找到了
解決辦法：<input type="file" ref="textfile"? accept="image/*"@change="fileChange" style="opacity: 0；/>就ok了
坑3.input 拍照無法上傳，相冊上傳OK。
又遇到這個問題的時候，我真的是很崩潰了，到處百度，有的說 要壓縮后上傳，但是我問過后臺我是不是要壓縮才能上傳，后臺說不用，百度其余的也沒有說遇到過這個問題，問了朋友 叫我用vant里面的文件上傳，我試了，也是上傳不了，作為一個沒有經(jīng)驗的我，開始慌了，不知道怎么辦了。這個時候我想到會不會是后臺限制了上傳的文件大小。
解決辦法：后臺更改我上傳大小的限制就OK了，如果上傳的太慢，記得做一個加載中的動畫，不要讓用戶覺得無任何響應(yīng)而去一直點。
坑4.鍵盤的定位，遇上樣式兼容
?關(guān)于style樣式： 鍵盤我用的是vant里面的鍵盤，樣式的話，自己修改就可以了，修改組件的樣式時可以重寫一個<style>修改組件的樣式</style>? ?因為<style scoped></style>只能對這個頁面有用對引入的組件是無效的，當(dāng)然<style></style>里在修改樣式會變?yōu)槿?，也就是另一個vue文件里面用的時候會影響樣式。
建議使用<style scoped>? 寫在這里面? 使用 >>> 穿透來修改? ? .包裹組件的div（是你自己寫）>>> .組件的class? ? ? ? ? </style>這樣就OK了，而且另一個頁面使用時候不會有影響，但是如果這個樣式你每個頁面都會用到，建議寫在<style></style>里，這樣就不會寫重復(fù)的樣式了。
關(guān)于鍵盤定位：因為這個定位是組件寫了positon:fixed固定定位所以屏幕太小，或者瀏覽器打開，鍵盤會遮擋你上面的東西，瀏覽器的底部工具欄也會把你的鍵盤往上擠導(dǎo)致樣式與設(shè)計圖不一致。
解決辦法，給頁面高度最外層的div的高度100%改成100vh利用媒體查詢，來設(shè)置css就OK了，具體就要細(xì)調(diào)了。
還有補一個?this.$route.query.name;可以獲取地址帶的參數(shù) 例如：http://.....?id=66;? this.$route.query.id就可以在
created() {
? ?打印? （this.$route.query.id）;? 控制臺就可以看見你拿到的id了
? },
坑5.input 單選框，樣式對不齊旁邊的文字，當(dāng)然這個樣式在ios上對齊的時候，安卓上可能對不齊我用的辦法是，我當(dāng)時沒有找到合適的辦法就把input變成div這樣就好調(diào)整啦。
這個項目就告一段落了。
