element-plus und icon werden bei Bedarf automatisch importiert
Importieren bei Bedarf Das endgültige Paketvolumen wird nicht so groß sein. Mit Hilfe von Plug-Ins zum automatischen Importieren bei Bedarf ist kein manueller Import erforderlich! ! ! Es sind zwei Plugins erforderlich: unplugin-vue-components, unplugin-auto-import
pnpm install -D unplugin-vue-components unplugin-auto-import unplugin-icons
Wenn es sich um ein von vite erstelltes Projekt handelt, lautet die Konfiguration in der Datei vite.config.ts:
// vite.config.ts
import {
defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {
ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import AutoImport from 'unplugin-auto-import/vite'
import path from 'node:path'
const pathSrc = path.resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [
ElementPlusResolver(),
// 自动导入图标组件
IconsResolver({
prefix: 'Icon'}),
],
// 自动生成components.d.ts文件
dts: path.resolve(pathSrc, 'components.d.ts'),
}),
Components({
resolvers: [
ElementPlusResolver(),
// 自动导入图标组件
IconsResolver({
prefix: 'Icon'}),
],
// 自动生成components.d.ts文件
dts: path.resolve(pathSrc, 'components.d.ts'),
}),
Icons({
autoInstall: true}),
],
})