Vue3空项目集成ElementPlus

## 简介

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

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

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

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

<!-- more -->

## 基本步骤

> 参考官网：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>
```

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

![success](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1696683124704.png)


## 拓展：引入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>
```