1. 安装 Element UI
npm install element-plus@next
2.引入 Element UI（在main.js中引入组件,注意要引入.css文件，图标也要单独引用）
import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import elementIcon from "./plugins/icons";import { createPinia } from 'pinia'import axios from "axios"// import './style.css'import router from './router'import App from './App.vue'const pinia = createPinia()const app = createApp(App);app.use(ElementPlus);app.use(router);app.use(pinia);app.use(elementIcon);app.config.globalProperties.$axios = axiosapp.mount('#app')
3.使用 Element UI 组件：在 Vue 组件中即可使用 Element UI 提供的各种组件
<template><el-form :model="user" label-width="120px" id="login"><el-form-item label="用户名" for="username"><el-input v-model="user.username" id="username" placeholder="请输入用户名" /></el-form-item><el-form-item label="密码" for="password"><el-input v-model="user.password" id="password" placeholder="请输入密码" /></el-form-item><el-button @click="login" margin="0 auto">登录</el-button></el-form></template>
4.按需加载：Element UI 也支持按需加载，以减小项目的体积。可以使用 babel-plugin-component 或者 babel-plugin-import 等工具来实现按需加载（做优化，可以不用）
// babel.config.jsmodule.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import',{libraryName: 'element-plus',customStyleName: (name) => {return `element-plus/lib/theme-chalk/${name}.css`;}},'element-plus']]};