vite + vue3 中使用按需加载

本文主要是介绍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(),
        // 该辅助插件也是必需的 

	

这篇关于vite + vue3 中使用按需加载的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！