Vue3 usa Element Plus bajo demanda

La carga a pedido en Vue 3 usa ElementUI-Plus, que se puede configurar de acuerdo con los siguientes pasos:

1. Instale la biblioteca ElementUI-Plus: Instale el paquete ElementUI-Plus en su proyecto a través de npm o yarn:

npm install element-plus --save

2. En main.js (o archivo de entrada de la aplicación principal), importe los componentes requeridos según sea necesario:

import {
    
     createApp } from 'vue'
import {
    
     ElButton, ElInput } from 'element-plus'
import App from './App.vue'

const app = createApp(App)

// 注册需要的组件
app.component(ElButton.name, ElButton)
app.component(ElInput.name, ElInput)

app.mount('#app')

En este ejemplo, solo presentamos dos componentes, ElButton y ElInput, como ejemplos. Puede introducir otros componentes según sus necesidades.

3. Introducción al estilo de configuración: la biblioteca de componentes ElementUI-Plus necesita importar los estilos correspondientes globalmente. Puede importar el archivo de estilo ElementUI-Plus en main.js o importarlo según sea necesario en un archivo de estilo separado:

• Importar todos los estilos (recomendado):

javascript
import 'element-plus/lib/theme-chalk/index.css'

• O importe algunos estilos según sea necesario (como importar solo los estilos de botones y cuadros de entrada):

javascript
import 'element-plus/lib/theme-chalk/button.css'
import 'element-plus/lib/theme-chalk/input.css'

4. Use componentes ElementUI-Plus en componentes:

Ahora puede usar los componentes de ElementUI-Plus en los componentes de Vue 3. Por ejemplo, usando ElButton y ElInput en el componente App.vue:

<template>
  <div>
    <el-button>点击</el-button>
    <el-input v-model="inputValue"></el-input>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      inputValue: ''
    }
  }
}
</script>