vant4移动端快速上手

安装

npm i vant

按需引入组件样式

使用 unplugin-vue-components 插件，它可以自动引入组件

npm i unplugin-vue-components -D

配置插件

import vue from '@vitejs/plugin-vue';

import Components from 'unplugin-vue-components/vite';

import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {

plugins: [

vue(),

Components({

resolvers: [VantResolver()],

}),

],

};

使用组件

<van-button type="primary">button</van-button>

引入函数组件的样式

Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。

// Toast

import { showToast } from 'vant';

import 'vant/es/toast/style';