vite + vue3 中使用按需加载

实现按需加载，主要用到两个插件

1. 按需自动加载UI组件:   unplugin-vue-components

该插件主要作用是省去每次使用一个自定义组件，或UI组件库的组件时对组件的引入。兼容不同UI组件库，需要在安装对应UI组件库的前提下，并引入对应UI组件库的 resolvers。

安装

npm i unplugin-vue-components -D

2. 按需自动加载 api 插件， unplugin-auto-import

该插件主要作用省去是对框架本身及相关库的引入、api的引入。

安装

npm i -D unplugin-auto-import

vite.config.js

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"],
        }),
    ],
});

Home.vue

<script setup> 

   <!-- ref 也不需要引入 -->

     const counter = ref(0);

     const inc = () => counter.value++;

</script>
<template>

      <div>{{ counter }}</div>

      <button @click="inc">counter+1</button>

    <!-- 以下组件都可以直接引入 -->
    <Foo></Foo>
    <el-button>elmentplus button</el-button>
    <n-button>naiveui button</n-button>
</template>

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

stores/counter.js

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

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

 

3.如果想要实现按需自动加载 项目中的 api 插件，vite-auto-import-resolvers

安装

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>

 

参考视频传送门