1. Install ElementPlus

cnpm install element-plus --save
Copy the code

2. Introduce ElementPlus into your main.js code

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
Copy the code

3. Build comparison before and after fully introducing ElementPlus

4. Introduce ElementPlus on demand

4.1 Installing the babel-plugin-Component plug-in

cnpm install babel-plugin-component -D
Copy the code

4.2 Main.js code modification

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

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);

/* or
 * app.use(ElButton)
 * app.use(ElSelect)
 */

app.mount('#app')
Copy the code

4.3 Add. Babelrc files & build comparison charts before and after introduction as needed

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
Copy the code

5. The running results after build are shown in the figure below