vite + vue3 中使用按需加载

npm i unplugin-vue-components -D

npm i -D unplugin-auto-import

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 实现 组件的按需加载
// 当引入 "unplugin-vue-components/vite 组件之后，页面中需要引入组件的地方就都不需要引入了
import Components from "unplugin-vue-components/vite";
// 引入对应 UI库的 resolver，则对应UI组件库的组件也不需要单独引入了
// 注意 使用具体的UI库，还是要具体 安装 ，比如   npm install -D naive-ui
import {
    AntDesignVueResolver,
    ElementPlusResolver,
    VantResolver,
    NaiveUiResolver,
} from "unplugin-vue-components/resolvers";
// 实现 Vue及Vue相关的库、api的 按需加载
import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
    plugins: [
        vue(),
        Components({
            // extensions: ["vue", "md"],
            resolvers: [
                AntDesignVueResolver(),
                ElementPlusResolver(),
                VantResolver(),
                NaiveUiResolver(),
            ],
        }),
        AutoImport({
            imports: ["vue", "vue-router", "pinia"],
        }),
    ],
});

<script setup> 

<script setup>
    import { useCounterStore } from "../stores/counter.js";
    const counter = useCounterStore();
</script>
<template>
    <div @click="counter.inc()">home {{ counter.num }}</div>
</template>

// import { defineStore } from "pinia";  这里也不需要引入

export const useCounterStore = defineStore("counter", {
    state() {
        return {
            num: 1,
        };
    },
    actions: {
        inc() {
            this.num++;
        },
    },
});

npm i vite-auto-import-resolvers unplugin-auto-import -D

// vite.config.js
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AutoImports from 'unplugin-auto-import/vite'
import {
    dirResolver,
    DirResolverHelper
} from 'vite-auto-import-resolvers'

export default defineConfig({
    plugins: [
        Vue(),
        // 该辅助插件也是必需的 👇
        DirResolverHelper(),
        AutoImports({
            imports: ['vue'],
            resolvers: [dirResolver()]
        })
    ]
})

// 之后 src/composables 下模块的默认导出将在项目中自动按需引入
例如 👇

// src/composables/foo.ts
export default 100

// src/App.vue
<script setup>
    console.log(foo) // 输出100，而且是按需自动引入的
</script>

<template> Hello World!! </template>