关于应用UI组件的移动端适配方式

// 组件
<van-sticky>
     <van-nav-bar title="列表" border></van-nav-bar>
     
     <div class="top">
         <div class="title" :class="{ active: active==0 }" @click="active=0">待审批</div>
         <div class="title" :class="{ active: active==1 }" @click="active=1">已审批</div>
     </div>
 </van-sticky>

 <to-do v-if="active==0"></to-do>
 <have-to-do v-if="active==1"></have-to-do>

//  数据
 export default {
     data() {
        return {
            active: 0,
        }
    },
}

npm install lib-flexible --save

import ‘lib-flexible'

npm install postcss-px2rem-exclude --save

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem-exclude': {
    //37.5是根据Vant组件的设计稿是375得来的,lib-flexible插件默认是将375分为10等分,如果UI组件的设计稿是750,那么这里的设置就是填750/10=75
      remUnit: 37.5,
      exclude: /folder_name/i
    }
  }
}