vant的使用

第一步：安装和配置

# Vue 2 项目，安装 Vant 2：
npm i vant -S

# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

第二步：自动按需引入组件。配置babel-plugin-import 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式（官方推荐做法）

# 安装插件
npm i babel-plugin-import -D

第三步：在项目 .babelrc 文件修改配置 plugins

"plugins": [
    ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
    }]
]

第四步：引用vant组件。在 main.js 里面导入 Vant ，这里我只导入了 vant 的 Button 组件

import { Button } from 'vant';
Vue.use(Button);

第五步：完成vant配置并使用组件

<van-button type="primary">主要按钮</van-button>

优化方案：

如果使用了较多的vant组件，不建议都直接写在main.js文件中，会很臃肿。解决办法为：

1. 在src目录文件夹下新建一个文件夹，这里我命名的是ui。里面创建vant.js文件，内容如下：

import { Overlay, Button, Loading, Uploader, Toast } from 'vant'

const vant = {
  install: function(Vue) {
    Vue.use(Overlay)
    Vue.use(Button)
    Vue.use(Loading)
    Vue.use(Uploader)
    Vue.use(Toast)
  }
}

export default vant

2. main.js文件里引入

// vant 按需引用
import vant from './ui/vant'
Vue.use(vant)

大功告成。

附加文件路径截图：