零、Chrome浏览器最小字号

问题来源，在产品的设计，UI出图时，可能会存在一些提示文字，或其他一些字号较小的文字，在前端使用CSS设置为相应的字号时，浏览器不支持，例设置：font-size: 10px;,但Chrome浏览器支持的最小字号是12px。
解决方法：使用CSS3的transform属性的缩放（scale）

-webkit-transform-origin-x: 0; 
-webkit-text-size-adjust:none; // 老版本Chrome解决方案
display: block; // inline 元素需要转换为inline-block、block等缩放才会生效
font-size: 10px !important; // 其他浏览器默认是支持的
transform: scale(0.9) !important;
-webkit-transform: scale(0.9, 0.9) !important;

一、数组排序

问题来源：后端返回的数据是一个对象数组，前端需要处理成一个中英文数组对象进行渲染，每个对象由中英文两个key组成,返回的数据由一个key值确定为同一文件的不同中英文，文件中英文的对象不一定是相邻且顺序返回，且可能含有多个文件的中英文对象。

// 后端返回
[{
    id: 1xxx,
    lan: 'zh-CN',
    number: '12xxx',
    name: 'xxxx'
},
{
    id: 2xxx,
    lan: 'en',
    number: '12xxx',
    name: 'xxxx'
}]
// 前端期望数据格式
[{
    'zh-CN':{
        id: 1xxx,
        lan: 'zh-CN',
        number: '12xxx',
        name: 'xxxx'
    },
    'en':{
        id: 2xxx,
        lan: 'en',
        number: '12xxx',
        name: 'xxxx'
    }
}]

处理方法：根据相同文件中英文唯一key对后端返回的数组对象进行排序，排序后取相邻的两个判断中英文赋值给新的数组，最后返回新的数组（注：与后端约定，后端返回的数据必定为偶数，且含有对应的中英文；保险起见，判断后端返回的数据长度，及返回的key数组是否为数组长度的一半。）

关键方法：数组排序（未确定唯一key是数字还是字符串）
/** 唯一key是数字或数字的字符串
/* arr 排序的数组
/* key 排序的key
/* return Array
**/
 function arraySortbyKey (arr, key) {
    if (Array.isArray(arr) && arr.length > 0 && key) {
        return arr.sort((a, b) => {
            let x = a[key]
            let y = b[key]
            return x - y
        })
    }
    return arr
}
/** 唯一key是字符串
/* key 排序的key
/* desc 是否降序排序
/* option key值的操作 例：转为数字，取值前几位数字
/* return Array
**/
function arraySortbyKey (key,desc, option){
  desc = (desc) ? -1 : 1;
  return function (a, b) {
    a = a[key];
    b = b[key];
    if ( option && Object.prototype.toString.call(option) === "[object Function]" ) {
      a = option(a);
      b = option(b);
    }
    if (a < b) { return desc * -1; }
    if (a > b) { return desc * 1; }
    return 1;
  }
};

二、变量替换

问题来源：一些文章需要根据不同的阅读人，一些地方展示不同的信息，例如：当前的阅读人、当前的日期、用户当前设置的语言等等。

// 后端返回
"当前的阅读人是{{user.name.firstname}},阅读时间{{date}}，阅读语言是{{lang}}"
obj={user: { // 多级
        name: {
            firstname: 'detanx'
        }
}}
// 前端显示
"当前的阅读人是detanx,阅读时间2019-9-21，阅读语言是中文"

处理方法：首先和文章模版的编辑人约定文章中的变量以怎么样的特殊符号包裹，变量是否存在多级的情况（例如：{user: {name: {firstname: 'xxx'}}}），约定好变量的规则（注：约定规则应该避免常用的一些符号，例如：《》，（），{}，<>，“”，''，""等等文章中会用到符号，约定好后，特殊符号只能用来包裹变量）。

/** 变量替换
/* content 含有变量的字符串
/* varsObj 变量对象
/* return String
**/
function varsReplace(content, varsObj) {
    const SYMBOL_REGEXP = /\{{(.+?)\}}/g
    const VARS_ARRAY = content.match(SYMBOL_REGEXP)
    if(VARS_ARRAY){
        for(let variable of VARS_ARRAY){
            const varChartArray = varChart.slice(2,-2).split('.')
            const len = varChartArray.length
            let value = varsObj[varChartArray[0]]
            for ( let i = 1; i < len; i ++) {
                value = value[varChartArray[i]]
            }
            content = content.replace(variable,value)
        }
    }
    return content
}

三、JavaScript大数处理

问题来源：在前后端接口的请求中，后端的数据为int64，但是js中无法表示出对应的number型数据，后端接口又必须接受int型，所以前端需要提交前处理成后端需要的大数（JavaScript能表示并进行精确算术运算的整数范围为：正负2的53次方，也即从最小值-9007199254740992到最大值+9007199254740992之间的范围；这两个边界值可以分别通过访问Number对象的MAX_VALUE属性和MIN_VALUE属性来获取。）
npm - bignumber.js

// 使用bignumber.js
# 安装
$ npm install bignumber.js
# 使用
const BigNumber = require('bignumber.js');

四、输入框特殊处理

问题来源：用户在输入金额或者其他的数字类型的时候，只能输入数字相关的数据，并且必须符合规范（例如：输入框只能输入+、-、.、1～9）,输入后如果金额非小数点位数大于3位，需要安装千分位的显示格式显示，并且输入的金额有大小范围显示。
npm - vue-cleave-component
options - 配置地址

安装
# npm 
npm install vue-cleave-component --save
# Yarn 
yarn add vue-cleave-component
使用
# HTML
<template>
  <div>
    <cleave v-model="value" 
    :options="cleaveOptions"
    @focus.native="setFocusInputBorder()"
    @blur.native="calPledgeAmount()" 
    @keyup.native.enter="calPledgeAmount()"
    class="cleave-class" name="detanx"></cleave>
  </div>
</template>
# script
<script>
  import Cleave from 'vue-cleave-component';
    
  export default {    
    data () {
      return {
        value: '', 
        cleaveOptions: {
            numeral: true, // 输入为数字
            numeralDecimalScale: 4 // 小数后可输入几位
        }      
      }
    },
    components: {
      Cleave
    },
    method:{
        setFocusInputBorder(){},
        calPledgeAmount(){},
    }
  }
</script>

五、数字格式化

问题来源：在显示数字的时候，需要使用美元的千分位显示规则显示（数字小数点左边每三位添加一个逗号，如：1000000.111 应该显示为 1,000,000.111 ）。
处理方法

// 判断传入值是否为空，具体可以根据业务需求修改
function isEmpty(value) {
    return [null, undefined, NaN, 'NaN', '', ' ', 'null', 'undefined', '0', 0].includes(value)
}
// 数字格式化
function numFormat(num) {
    if(isEmpty(num) || isNaN(num) ) { // 判断是否为空或无效值
        return '0.00'
    }
    if (Math.abs(+num) < 1000) { // 数字的绝对值是否小于1000，小于1000直接返回
        return num;
    }
    return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','));
}

六、node-sass

问题来源：正常在项目中想要使用node-sass，直接使用npm install node-sass会安装失败，或提示没有权限。
处理方法

npm install
npm install node-sass --unsafe-perm=true --allow-root