Método de importación de componentes Vue3 Vite + Ts Element-Plus bajo demanda

Marco del proyecto: Vite + Ts + Element-Plus

Vue3 usado por Vite necesita usar la biblioteca de componentes Element-Plus
Si se usa Vue2, use la biblioteca de componentes Element

Instalar Element-Plus

En el directorio raíz del proyecto, use el comando npm para instalar:

npm install element-plus --save

o abreviado:

npm i element-plus -S

"instalar" se puede abreviar como "i", "--save" se puede abreviar como "-S", y también se puede abreviar al instalar otros paquetes dependientes.
-S significa instalar y agregar información de paquetes dependientes a la configuración de "dependencias" del archivo "paquete.json", y "dependencias" registra las cosas que se usarán cuando se ejecute el entorno oficial del proyecto (entorno en línea);

-D Instalar y agregar información del paquete dependiente a la configuración "devDependencies" del archivo "package.json".
Algunas dependencias no necesitan instalarse en el entorno oficial. Solo se usan en el entorno de desarrollo y se pueden instalar. Usar "-D", "devDependencies" registra las cosas que se utilizarán en el entorno de desarrollo

Si no hay -S o -D, es directamente "npm install *alguna dependencia", que es equivalente a "npm install *alguna dependencia -S", que instalará y registrará la información de instalación en la configuración de "dependencias" de el archivo "paquete.json".

Después de la instalación, puede ver la información del paquete de instalación "element-plus" en la configuración de "dependencias" del archivo "package.json", de la siguiente manera:

inserte la descripción de la imagen aquí

Instale los dos complementos unplugin-vue-components y unplugin-auto-import

Si desea importar automáticamente los componentes usados de Element-Plus, debe instalar dos complementos adicionales, unplugin-vue-components y unplugin-auto-import, y
use el siguiente comando para instalar:

npm install -D unplugin-vue-components unplugin-auto-import

-D se instala en el entorno de desarrollo, no se requiere para el entorno formal

Configure los ajustes de importación automática del archivo vite.config.ts

Agregue el siguiente código al archivo:

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    
     ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
    
    
  plugins: [
    AutoImport({
    
    
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    
    
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

como muestra la imagen:

inserte la descripción de la imagen aquí

Uso de componentes element-plus

Use componentes directamente en la página, de la siguiente manera:

<template>
  <div class="home">
    <el-button type="primary">Primary</el-button>
  </div>
</template>

Después de ejecutar el proyecto, puede ver los componentes del botón importados:

inserte la descripción de la imagen aquí
Después de que el componente se use en la página, el componente se importará automáticamente y la información de importación del componente usado se puede ver en el archivo "components.d.ts":

inserte la descripción de la imagen aquí

Se pueden encontrar más métodos de importación diferentes en la documentación oficial de element-plus:

https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5