項(xiàng)目需求：微信公眾號
技術(shù)選型：vue+webpack4.0+Mint-ui
Mint-ui是基于vue的一個移動端ui框架，開發(fā)過程中引用的一些組件還是很方便辛掠，但是也對一些默認(rèn)樣式做了修改弥激，這個在外部單獨(dú)建一個css的文件進(jìn)行修改进陡，然后在main.js中引用。
一微服、框架搭建
這一步不是自己做的趾疚，先省略，后面補(bǔ)充以蕴。
注意：使用了webpack4.0,有些配置需注意與之前的語法不太一樣
? ?1糙麦、config里面的訪問地址配置config==>index.js
二、圖片上傳
省略開發(fā)過程中毫無障礙的基礎(chǔ)技術(shù)點(diǎn)丛肮，整個項(xiàng)目頁面斷斷續(xù)續(xù)大概寫了5天（中間插入了別的項(xiàng)目的任務(wù)）赡磅，接口聯(lián)調(diào)花了4天，其他的就是漫長的填坑之路宝与。
圖片上傳是我的一大痛點(diǎn)焚廊，所以單獨(dú)拿出來了
1、圖片上傳插件選擇习劫，選的是 vue-image-upload-preview
三咆瘟、漫長的填坑之路
1、項(xiàng)目開發(fā)完打包诽里，樣式不顯示
更改config文件夾下的index.js中的這行配置袒餐，修改一下路徑
2、項(xiàng)目開發(fā)完打包谤狡，背景圖不顯示
用了webpack4.0匿乃，相應(yīng)的配置語法有些變動，直接貼一段關(guān)于背景圖顯示的代碼(主要是加上紅框里的代碼)豌汇，
3幢炸、配置每個路由頁面的標(biāo)題
在router下面的index.js文件中每個路由下配置meta：{title:''}的屬性
然后在main.js中進(jìn)行替換
4、calc屬性的使用
+和-之間一定要留空格才會生效拒贱，這個屬性在計算需要填滿屏幕的頁面很有用宛徊。
5、路由傳參
push后面寫路由的name及要攜帶的參數(shù)params逻澳，
const self = this;
self.$router.push({name:'fillinfo',params:{isRegister:'1'}});
然后在跳轉(zhuǎn)過去的路由頁面通過下面的方法獲取
const self = this;
self.isRegister= self.$route.params.isRegister;
6闸天、姓名、手機(jī)號斜做、銀行卡苞氮、身份證等的校驗(yàn)
相信這些校驗(yàn)大家都很熟悉，正則公式到處都有瓤逼，我就不多說
下面主要說一下輸入框除了需要做校驗(yàn)外笼吟，在輸入的時候只允許輸入數(shù)字或漢字的库物，其他輸入無效的限制
先在公共文件中封裝幾個過濾方法，然后再需要進(jìn)行校驗(yàn)的輸入框所在的vue組件中引用該文件贷帮，并在watch中進(jìn)行監(jiān)聽戚揭。
7、補(bǔ)充幾個樣式修改的例子撵枢，有些也許有用
單選框radio的樣式修改民晒，將radio默認(rèn)的樣式改成下面的樣式
其實(shí)就是用ui提供的切圖進(jìn)行替換，但是radio默認(rèn)的樣式是通過偽類元素寫出來锄禽，跟這個還是有些差別的
這里就只拿出了關(guān)鍵的兩段樣式潜必，其實(shí)沒有多復(fù)雜，也是用到了前面說過的background-image的屬性沃但，因?yàn)関ue項(xiàng)目中的背景圖直接用background是不能100%填充的刮便。
結(jié)語：本次就總結(jié)到這，后續(xù)有補(bǔ)充的再更新绽慈。
