Vue3 uses Element Plus on demand

On-demand loading in Vue 3 uses ElementUI-Plus, which can be set according to the following steps:

1. Install the ElementUI-Plus library: Install the ElementUI-Plus package into your project via npm or yarn:

npm install element-plus --save

2. In main.js (or main application entry file), import required components as needed:

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')

In this example, we only introduced two components, ElButton and ElInput, as examples. You can introduce other components according to your needs.

3. Configuration style introduction: ElementUI-Plus component library needs to import corresponding styles globally. You can import the ElementUI-Plus style file in main.js or import it as needed in a separate style file:

• Import all styles (recommended):

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

• Or import some styles as needed (such as importing only the styles of buttons and input boxes):

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

4. Use ElementUI-Plus components in components:

Now you can use ElementUI-Plus components in Vue 3 components. For example, using ElButton and ElInput in the App.vue component:

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

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