组件库的引入

1. vant安装

官网地址

# Vue 3 项目，安装最新版 Vant
npm i vant -S

2. vant配置自动按需引入

安装插件 unplugin-vue-components, 它可以自动引入组件，并按需引入组件的样式。相比于基础用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积。

npm i unplugin-vue-components -D

基于 vite 的项目，在 vite.config.js 文件中配置插件：

// ...
// 添加
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    // ...
    // 添加
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

3. 使用组件

完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件。

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

4. 函数组件的样式

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

// main.ts
import 'vant/es/toast/style'
import 'vant/es/dialog/style';
import 'vant/es/notify/style';
import 'vant/es/image-preview/style';