1.移動端適配問題
在這里使用的是手淘的flexible畔况，直接把這個文件拷貝進(jìn)項目剩檀，并在頁面渲染之前使用即可。
我們適配主要是涉及使用px的時候汞扎，比如width/height/margin/padding等季稳，所以我們使用sass 做了一個px轉(zhuǎn)成rem，如下
@function px2rem($px, $base-font-size: 75px) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return px2rem($px + 0px); // That may fail.
} @else if (unit($px) == rem) {
@return $px;
}
@return ($px / $base-font-size) * 1rem;
}
//使用
height: px2rem(80px);
那個$base-font-size可根據(jù)UI給的圖而定澈魄，我們用的750的景鼠，所以就定為75px
對于字體：
@mixin font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
//使用
@include font-dpr(14px);
這里就是針對不同dpr設(shè)備做一個分類。
對于居中：
//使用前將父元素的寬高設(shè)置好痹扇，自元素引入铛漓，會自動填充
@mixin center{
width:100%;
height:100%;
display:flex;
align-items: center;
justify-content: center;
}
@mixin centerY{
width:100%;
height:100%;
display:flex;
align-items: center;
}
@mixin centerX{
width:100%;
height:100%;
display:flex;
justify-content: center;
}
也是使用flex來實現(xiàn)，要注意的就是元素的寬高需要自己另外設(shè)置鲫构，不然就是根據(jù)填充內(nèi)容定浓恶。
2.js工具
深拷貝
JSON.parse(JSON.stringify(data));
用這個基本的對象數(shù)組都可以完美實現(xiàn)，但是要注意如果元素有函數(shù)结笨，那么會轉(zhuǎn)成undefined包晰，但是對于基本業(yè)務(wù)來說夠用了湿镀，至于有函數(shù)怎么轉(zhuǎn)暫時還沒做研究（大概是懶）。
轉(zhuǎn)化數(shù)字為千分位
function toThousands(number) {
var number = String(number).split('.');
var num = (number[0] || 0).toString(), result = '';
while (num.length > 3) {
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if (num) { result = num + result; }
return result+(number[1]?('.'+number[1]):'');
}
有小數(shù)也可以
使用storage
我們經(jīng)常會使用storage幫我們?nèi)ゴ鎯σ恍┬畔⒎ズ叮亲詈迷诖鎯Φ臅r候加密勉痴，最起碼用base64加密
vue-router
1.在使用路由跳轉(zhuǎn)盡量不要使用push去改變路由，尤其移動端頁面树肃，跳來跳去蚀腿，路由對戰(zhàn)堆棧就會有很多，使用返回按鈕就會很煩扫外，往往按了很多次都跳不出去莉钙，建議使用replace。
2.暫時未找到路由回退的監(jiān)聽筛谚。
3.在頁面監(jiān)聽頁面路由變化時可以監(jiān)聽$route, 相信有一部分人都沒用過磁玉。
watch:{
'$route'(newVal, oldVal){
if(newVal.matched[0].name == "main"){
this.currentTab = newVal.path;
}
}
},
vuex使用
只說一下注意點吧，它只能作為數(shù)據(jù)臨時保存驾讲，相當(dāng)于搞了一個全局變量蚊伞，所以一些請求接口用的公共數(shù)據(jù)還是要通過storage保存，因為刷新頁面vuex中的數(shù)據(jù)會重制吮铭。
對于一些簡單的應(yīng)用时迫，沒必要用vuex，直接用eventBus就可以解決非父子組件通信谓晌。
vue中model-view
對于對象或者數(shù)組類型的數(shù)據(jù)掠拳，我們會發(fā)現(xiàn)有時候改變了但是頁面沒有渲染出來，這是因為無法監(jiān)測到數(shù)據(jù)變化纸肉，自然也就不回重新渲染溺欧，可以使用以下方法：
1.this.$set()//官方提供
2.數(shù)組的一些可以改變的方法，push,pop,shift,unshift,splice等
深度監(jiān)控
watch:{
goodsList:{
deep:true,//表示深度監(jiān)控
immediate: true,//將立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)
handler: function(val, oldVal){
}
}
}
}
圖片資源
當(dāng)使用img標(biāo)簽柏肪，并且想變量來表示url加載本地圖片姐刁，一定要用require(url)，否則加載不到烦味。
關(guān)于mint-ui的一些坑聂使，大部分都可以在官方的issue中得到解決。
