vite项目如何按需引入vant插件

如果没有设置按需引入我们只能这样用

import {Icon} from 'vant'
页面也必须保证使用Icon。如果使用van-icon是识别不出来的。这样页面每个使用的组件都必须引入。
而且在页面上都必须是和引入的一样的大写标签
<Icon color="#A8ABB2" size="14" name="arrow"/>

能不能全局在一个地方引入后，其他页面无需引入直接使用van-的格式写呢？

首先肯定是安装vant

npm install vant

然后下面这两个也是必须的

npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

在vite.config.js

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite';
import vue from '@vitejs/plugin-vue'
import { VantResolver } from '@vant/auto-import-resolver';


export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ]

。。。。

})