NPM

    1. npm i vant -S

    YARN

      CDN

      访问下面的文件 URL，会自动重定向至最新版本的 CDN 链接，建议使用固定版本的 CDN 链接，避免升级时受到非兼容性更新的影响。

      方式一. 使用 babel-plugin-import (推荐)

      1. # 安装 babel-plugin-import 插件
      2. npm i babel-plugin-import -D
      1. // 在 .babelrc 或 babel-loader 中添加插件配置
      2. // 注意：webpack 1 无需设置 libraryDirectory
      3. {
      5.     ["import", {
      6.       "libraryName": "vant",
      7.       "libraryDirectory": "es",
      8.       "style": true
      9.     }]
      10. }

      接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式

      方式二. 按需引入组件

      1. import Button from 'vant/lib/button';
      3. import 'vant/lib/vant-css/button.css';

      方式三. 导入所有组件

      1. import Vue from 'vue';
      2. import Vant from 'vant';
      3. import 'vant/lib/vant-css/index.css';
      5. Vue.use(Vant);

      Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具

      • 是一款 postcss 插件，用于将单位转化为 rem
      • lib-flexible 用于设置 rem 基准值
        下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改