Vant 的引入及使用

因为我们项目就是在vue-cli3.x的基础上进行的一个能力的补充，新的脚手架生成的项目如何引入vant，简单的说一下。
项目地址：https://github.com/Ewall1106/mall

安装

• 如果你是老的脚手架（vue-cli2.x）搭建的vue项目，如何引入使用vant可以看看这个-->有赞 vant 组件库的引入；

• 新的脚手架引入 vant 也很简单，我们先安装一下：

$ npm install vant --save

• 因为我们的项目中本来是使用sass来作为 css 的一个预编译器的，但是 vant 是用的less语法，所以我们还需要安装下less，不然会报错。

$ npm isntall less less-loader --save-dev

按需引入

• 配置安装参考官网的教程就可以了。

• 我们就按照教程的来，在我们的babel.config.js中配置一下：

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  // vant引入：
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true,
      },
      "vant",
    ],
  ],
};

使用

• 在我们项目的main.js文件中引入一下：

// main.js
import { Button } from "vant";
Vue.use(Button);

• 按照上面这样引入后，就可以在全局任意页面中使用了。

• 但在我们的项目开发中，发现按需引入的 vant 组件越来越多，所以专门在src/components/Vant文件夹下维护了一份组件引入的 js 文件，然后在 main.js 中统一引入，这样的话就不会把 main.js 搞的很繁杂了。

import Vue from 'vue'

// https://youzan.github.io/vant/#/zh-CN/home
import {
  Button,
  Toast,
  Dialog,
  Field,
  ...
} from 'vant'

Vue.use(Toast)
  .use(Dialog)
  .use(Notify)
  .use(Field)
  ...

• 如果你使用postcss-px-to-viewport来解决移动端的适配问题，并将viewportWidth设置为了750，那么你还需要在postcss.config.js文件中将其selectorBlackList名单中把vant加进去，因为 vant 的样式是按325px来设计的，不然 vant 的组件都会缩小一半。

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 750,
      unitPrecision: 3,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
+     selectorBlackList: ['.ignore', 'van'],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [],
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568
    }
  }
}

其它

• 如何修改vant的主题色？在@vue/cli3.x的项目中，修改主题色是件简单的事情。

• 我们可以在vue.config.js配置文件中向向预处理器 Loader 传递选项，就可以替换的vant的默认样式：

module.exports = {
  // ...
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          "font-size-sm": "100px",
          "font-size-md": "200px",
          "font-size-lg": "300px",
        },
      },
    },
  },
};

• vant也给我们提供了一份它的样式表：vant 样式表