vant的使用

按需引入

通过本章节你可以了解到 Vant 的安装方法和基本使用姿势。
npm i vant

方法一

下面是使用 Vant 组件的用法示例：

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

ant 支持多种组件注册方式，除了在 app 上全局注册组件，你也可以选择其他的方式，比如局部注册

方法二：局部注册使用

在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。

相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。

通过 npm 安装

npm i unplugin-vue-components -D
下一步
如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

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()],
}),
],
};
完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件。

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

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

// Toast
import { showToast } from 'vant';
import 'vant/es/toast/style';

// Dialog
import { showDialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { showNotify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';

注意：unplugin-vue-components 并不是 Vant 官方维护的插件，如果在使用过程中遇到问题，建议优先到 antfu/unplugin-vue-components 仓库下反馈。

方法二：局部注册使用（另一个写法）

在main.js中

import { createApp } from 'vue'

import './style.css'
import App from './App.vue'
import 'vant/lib/index.css';

createApp(App).mount('#app')

在app.vue中

<template>
<hello-world></hello-world>

</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components:{
    HelloWorld,

  }
}
</script>

在组件.vue中

<template>
  <div>
    <Button type="success">sss</Button>
    <Button type="warning">警告按钮</Button>
  </div>
</template>
<script>
import { Button } from 'vant';

export default {
  components: {
    Button
  },
  // 组件的其他选项和代码
}
</script>