vant vue3 按需引入

按需导入，仅作为参考

import {
    Button,
    Tabbar,
    TabbarItem,
    NavBar,
    Swipe,
    SwipeItem,
    Loading,
    Image as VanImage,
    Tab, Tabs,
    Icon,
    List,
    Lazyload,
    ImagePreview,
    Badge ,
    Divider,
    Cell, CellGroup,
    ActionBar, ActionBarIcon, ActionBarButton ,
    Sidebar, SidebarItem ,
    SubmitBar ,
    Checkbox, CheckboxGroup,
    Card,
    Empty,
    SwipeCell  ,
    Tag,
    Popup ,
} from 'vant';

export function vant(app) {
    app.use(Popup);
    app.use(Tag);
    app.use(SwipeCell);
    app.use(Empty);
    app.use(Card);
    app.use(Checkbox);
    app.use(CheckboxGroup);
    app.use(SubmitBar);
    app.use(SidebarItem);
    app.use(Sidebar);
    app.use(ActionBarButton);
    app.use(ActionBarIcon);
    app.use(ActionBar);
    app.use(CellGroup);
    app.use(Cell);
    app.use(Divider);
    app.use(ImagePreview);
    app.use(Badge);
    app.use(Lazyload);
    app.use(List);
    app.use(Icon);
    app.use(Tab);
    app.use(Tabs);
    app.use(VanImage);
    app.use(Loading);
    app.use(Swipe);
    app.use(SwipeItem);
    app.use(NavBar);
    app.use(Button);
    app.use(Tabbar);
    app.use(TabbarItem);
}
export default {
    components: {
        [ImagePreview.Component.name]: ImagePreview.Component,
    },
};

在main.js 中引入，以下仅作为参考

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 按需引入 vant
import 'vant/lib/index.css';
import { vant } from '@/plugin/vant.js'
// 引入默认样式
import '@/assets/css/normalize.css'
// 引入公共样式
import '@/assets/css/index.css'
// 引入封装 axios
import '@/utils/axios.js'
// 引入封装 rem
import '@/utils/rem.js'
// 引入图片懒加载
import lazyPlugin from 'vue3-lazy'

// 挂载
const app = createApp(App)
vant(app)
app.use(store)
app.use(router)
app.mount('#app')
// 图片懒加载
// app.use(lazyPlugin, {
//     loading: require('@/assets/img/gif/Pinwheel.gif'), // 图片加载时默认图片
//     // error: require('@/assets/images/error.png')// 图片加载失败时默认图片
// })

前端小白，如有错误，只记录开发中遇到问题，如有错误，望大神指点迷津