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(), // 该辅助插件也是必需的标签:vue,counter,unplugin,vue3,组件,import,vite,加载 来源: https://www.cnblogs.com/beileixinqing/p/16441368.html