SoFunction
Updated on 2025-04-03

How to implement on-demand import and global import in element-plus

Import on demand:

Install plug-ins

First, additional plug-ins need to be introduced: former**vite-plugin-componentsRenamed tounplugin-vue-components**

npm install unplugin-vue-components

Configuration plug-in

Add configuration in weapack or vite configuration file

// 
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
​
export default {
  plugins: [
    // ...
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

// 
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
​
 = {
  // ...
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
//
import { createApp } from 'vue'
import App from './'
​
import { Edit,Search } from '@element-plus/icons'  //Icons need to be imported separately, and the icons need to be imported as neededimport { ElButton } from 'element-plus';   //Import on demand​
const app = createApp(App);
//Register component("edit", Edit)
("search", Search)
('ElButton',ElButton)
('#app');
<template>
    <h2>homepage</h2>
    <el-button type="primary" >Main button</el-button>
    <el-button type="success" >Success Button</el-button>
    <el-icon :size="20" :color="'blue'">
        <edit />
    </el-icon>
    <el-icon :size="20">
        <search></search>
    </el-icon>
</template>
<script setup lang="ts"> 
</script>

Global import

Recommended to add

// 
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

Install

npm install element-plus --save
# or
yarn add element-plus
​
# Install icon icon dependency librarynpm install @element-plus/icons
# or
yarn add @element-plus/icons

Global configuration in the file

import { createApp } from 'vue'
import App from './'
import { store, key } from './store';
// Inject routingimport router from './router';
​
// Global introduction of ui libraryimport ElementPlus from 'element-plus'
import 'element-plus/dist/'
​
const app = createApp(App);
(store, key);
(router);
(ElementPlus);
('#app');

Using ui components

Use icons, because the icons and ordinary ui components are not the same package, and use needs to be imported separately

//Use it directly after importing specific components<template>
    <el-icon :size="20" :color="'blue'">
        <edit />
    </el-icon>
</template>
<script setup lang="ts">
    import { Edit } from '@element-plus/icons'
</script>

You can use the icon library directly in the component by importing it in the file and registering it with(). The same is true for ordinary ui library

<template>
    <h2>homepage</h2>
    <el-button type="primary" >Main button</el-button>
    <el-button type="success" >Success Button</el-button>
    <el-icon :size="20" :color="'blue'">
        <edit />
    </el-icon>
    <el-icon :size="20">
        <search></search>
    </el-icon>
</template>
<script setup lang="ts"> 
</script>

This is the article about how to implement on-demand import and global import in element-plus. For more related element-plus, please search for my previous articles or continue browsing the related articles below. I hope you can support me more in the future!