vue+vant-ui+rem 移动端适配

1、vue创建项目(步骤忽略)

2、vant下载

(1)npm i vant -S

(2)npm i babel-plugin-import -D   (按需引入插件)

// 在.babelrc 中添加配置 (按需引入插件)

{

  "plugins": [

    ["import", {

      "libraryName": "vant",

      "libraryDirectory": "es",

      "style": true    }]

  ]

}

3、适配下载:

npm i lib-flexible --save-dev

main.js引入适配: import 'lib-flexible/flexible'

4、npm install  postcss-pxtorem --save-dev

"postcss-pxtorem":{

      rootValue:75,//设计稿为750

      propList:['*'],

      selectorBlackList:['van']//排除van

    }

5、vant使用

import { Dialog,Loading } from 'vant';

components:{

[Loading.name]:Loading

}

<van-loading class="btn" type="spinner"  />


6、注意:

border使用px,不转化为rem方法:   大写PX ,例:1PX solid #f00;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容