全局注册使用

main.ts文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import { store, key } from './store';

import { directive } from '/@/utils/directive';

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// 统一导入el-icon图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 载入全局样式
import '/@/theme/index.scss';
import mitt from 'mitt';

const app = createApp(App);
app
    .use(router)
    .use(store, key)
    .use(ElementPlus)
    .mount('#app');

// 事件第三方工具
app.config.globalProperties.mittBus = mitt();

// 统一注册el-icon图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

directive(app);

使用文件（input内直接使用prefix-icon）
<template>
    <el-form class="login-content-form">
        <el-form-item>
            <el-input
                type="text"
                placeholder="用户名"
                prefix-icon="User"
                v-model="ruleForm.userName"
                clearable
                autocomplete="off"
            >
            </el-input>
        </el-form-item>
    </el-form>
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, computed, getCurrentInstance } from 'vue';
export default defineComponent({
    name: 'loginAccount',
    setup() {

        const state = reactive({
            isShowPassword: false,
            ruleForm: {
                userName: '',
                password: '',
                code: '',
            },
            loading: {
                signIn: false,
            },
        });

        return {
            ...toRefs(state),
        };
    },
});
</script>

<style scoped lang="scss">
.login-content-form {
    margin-top: 20px;
}
</style>