Vant官网
环境:vue/cli 4.5.11

1、装置

在package.json中查看Vue的版本，下载对应的版本
Vue2的我的项目：npm i vant -S
Vue3的我的项目：npm i vant@next -S

2、应用

2.1、首先在main.js中导入css和vant
import 'vant/lib/index.css'

2.2、引入组件

法一：主动按需引入组件（举荐）
1.装置插件
npm i babel-plugin-import -D
2.配置babel.config.js（webpack1在babelrc增加配置，无需设置libraryDirectory）

module.exports = {  plugins: [    ['import', {      libraryName: 'vant',      libraryDirectory: 'es',      style: true    }, 'vant']  ]};

3.在的vue组件中应用vant的组件，留神组件注册的形式

<van-button type="primary">次要按钮</van-button>import { Button } from 'vant'components: {   [Button.name]: Button}

法二：手动按需引入组件
1.在在main.js中导入

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

2、在vue组件中应用不须要再次导入组件，间接用

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

法三：导入所有组件
1.在main.js中导入

import Vant from 'vant';Vue.use(Vant);

2.在vue组件中应用不须要再次导入组件，间接用

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

留神：如曾经用法一在babel.config.js中设置了主动按需引入，则不能在main.js中如法三再次导入所有组件，否则会报错Uncaught ReferenceError: Vant is not defined