vue2 移动端 vant UI 使用

1. vue create vant-app

 完成项目创建步骤（省略）...

2. 安装 vant 包

  2.1  cnpm install vant@2.12.31 --save-dev

3. 浏览器适配

        Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，（推荐使  用 postcss-px-to-viewport 进行转换）。

 或者 如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

3.1 安装：

        cnpm i postcss-pxtorem@5.1.1   -D

        cnpm install lib-flexible  -S

4. 入口 main.js  引入 lib-flexible

        import "lib-flexible/flexible";

5. 设计稿尺寸

  如果设计稿的尺寸不是 375，而是 750 或其他大小，可以在项目根目录添加 postcss.config.js 将 rootValue 配置调整为:

// postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

注意：在 写 css  样式时，涉及到的 单位 正常使用 px ,  lib-flexible 插件会 帮我们自动转成 rem 单位，在浏览器上看到的到位 是 rem。不需要 转换 成 rem 的 px 单位 可以 写成 PX 或 Px, 比如 border: 1PX  solid #ddd;