简介

在Vue2时代，Element是一个国内市占率很高的UI库，其中尤其是vue-elemnet-admin开源项目的使用。

Element Plus 是基于 Vue 3，面向设计师和开发者的组件库。

• 官网：https://element-plus.org/

本文用于记录Vue3空项目集成Element Plus的基本配置。

基本步骤

参考官网：https://element-plus.org/zh-CN/guide/installation.html

1. 安装依赖

bash
npm install element-plus

运行成功后可以在项目的package.json的dependences标签下看到相关依赖及版本，如下：

json
  "dependencies": {
    "element-plus": "^2.3.14"
  }

2. 全局引入依赖

在main.ts或main.js中引入ElementPlus和相应的css，如下：

typescript
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// 引入ElementPlus
import ElementPlus from 'element-plus';
// 引入中文支持
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
// 引入ElementPlus-css
import 'element-plus/dist/index.css';
// 如果只想导入css变量
import 'element-plus/theme-chalk/dark/css-vars.css';

const app = createApp(App)

app.use(createPinia())
app.use(router)
// 全局使用ElementPlus
app.use(ElementPlus, { locale: zhCn })

app.mount('#app')

以上引入中文支持的代码，在typescript环境下可能会报红，可以在main.ts同级创建declaration.d.ts文件，填入以下内容：

typescript
// 忽略vue中文支持文件的ts检查
declare module 'element-plus/dist/locale/zh-cn.mjs';

3. 使用测试

经过以上两步，已经成功将Element-plus引入到项目中，下面来测试一下引入是否成功：

将一下代码拷贝到你的App.vue文件中：

html
<el-button type="success">Element-plus Success</el-button>

运行项目查看相应的页面，可以看到一个按钮如下，则说明引入成功：

拓展：引入Element-plus图标

参考官网：https://element-plus.org/zh-CN/component/icon.html

Element-plus的图标资源需要单独引入到项目中，可以运行以下命令安装依赖：

bash
npm install @element-plus/icons-vue

安装成功后，可以在任何需要使用的地方引入所需图标，基本使用如下：

html
<template>
  <!--查询按钮使用图标-->
  <el-button :icon="Search" />
</template>

<script setup lang="ts">
  // 引入查询、删除、编辑图标
  import { Search, Delete, Edit } from '@element-plus/icons-vue';
</script>