1、安装依赖

Element-plus官���：快速开始 | Element Plus (element-plus.org)

pnpm i element-plus

在项目main.ts中引入element-plus:

import { createApp } from "vue";import App from "./App.vue";// 从Element官网上参考，引入element-plus插件与样式import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'const app = createApp(App)// 挂载到应用上app.use(ElementPlus)app.mount('#app')

在app.vue中使用element-plus:

          测试    Plain    Primary    Success    Info    Warning    Danger   
VUE3
  

运行启动项目：pnpm run dev

 2、安装element 图标库

pnpm i @element-plus/icons-vue

在app.vue页面中使用图标：先引入图标Plus，再在控件按钮中使用图标：icon="Plus"

  // 引入图标  import {Plus} from "@element-plus/icons-vue"          测试    Plain    Primary    Success    Info    Warning    Danger   
VUE3
  

 3、element-plus 国际化

由于element-plus模式显示的英文，在使用控件过程中要求显示中文需要在main.ts如下配置

import { createApp } from "vue";import App from "./App.vue";// 从Element官网上参考，引入element-plus插件与样式import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'// 配置element-plus国际化//@ts-ignore --忽略ts校验import zhCn from 'element-plus/dist/locale/zh-cn.mjs'const app = createApp(App)app.use(ElementPlus, {    locale: zhCn,  })// 挂载到应用上app.use(ElementPlus)app.mount('#app')

需要注意的是：'element-plus/dist/locale/zh-cn.mjs'引入后会报红，是由于ts校验检测导致的，通过添加：//@ts-ignore   可忽略ts检测