elementPlus+vue3引入icon图标

安装包管理，推荐使用 yarn  npm包有时候会有包冲突，在项目的根目录下执行，在终端下

# Yarn
$ yarn add @element-plus/icons-vue

在main.js或main.ts中进行全局注册，导入所有图标

import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

页面上按需引入需要的icon图标

<script>
// 按需引入需要的图标
import { User,Lock } from "@element-plus/icons-vue"//引用图标需要通过setUP进行注册
export default {setup() {return {UserLock}},
}
</script>

template模块中 :prefix-icon="User" 引入需要的图标    :surfix-icon="User" 在输入框末尾

<template><!--   用户名     --><el-form-item label="用户"><el-input :prefix-icon="User" v-model="input" placeholder="请输入用户名"> </el-input></el-form-item><!--   密码     --><el-form-item label="密码"><el-input :prefix-icon="User" v-model="input" type="password" placeholder="请输入密码" show-password></el-input></div></div>
</template>