Vue3加载Element-plus

Element-plus的官方文档： https://element-plus.gitee.io/zh-CN/component/button.html

Element是一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库；
Element Plus是基于Vue3的。

## 安装Element-Plus
`npm install element-plus --save`

## 引用
### 完整引用【成功】
如果你对打包后的文件大小不是很在乎，直接使用完整导入会更方便
```js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue

const app = createApp(App)

app.use(ElementPlus)
app.mount("#app")
```

### 按需导入【推荐，需要重启serve的】
按需导入才是我们的最爱，毕竟真实应用场景中并不是每个组件都会用到，这回造成不小的浪费。
首先，需要安装`unplugin-vue-components`和`unplugin-auto-import`这两款插件
```
npm install -D unplugin-vue-components unplugin-auto-import
```
然后修改vue.config.js配置文件:
```js
//原内容
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})
```

```js
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require("unplugin-auto-import/webpack")
const Components = require("unplugin-vue-components/webpack") 
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers")

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
	  plugins: [
		  AutoImport({
			  resolvers: [ElementPlusResolver()]
		  }),
		  Components({
			  resolvers: [ElementPlusResolver()]
		  })
	  ]
  }
})
```

## Vue3加载Element-plus字体图标
需要另外安装
`npm install --save @element-plus/icons-vue`

### 全局注册
根目录下创建plugins目录，并创建icons.js文件，内容如下:
```js
import * as components from "@element-plus/icons-vue";
export default {
	install: (app) => {
		for (const key in components){
			const componentConfig = components[key];
			app.component(componentConfig.name, componentConfig);
		}
	}
}
```

### 引入文件
main.js中引入icons.js文件
```
import elementIcon from "./plugins/icons
app.use(elementIcon)
```
使用：
```html
<template>
  <p>
    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
    seconds, you can also override this
  </p>
  <el-icon :size="20">
    <Edit />
  </el-icon>
  <el-icon color="#409EFC" class="no-inherit">
    <Share />
  </el-icon>
  <el-icon>
    <Delete />
  </el-icon>
  <el-icon class="is-loading">
    <Loading />
  </el-icon>
  <el-button type="primary">
    <el-icon style="vertical-align: middle">
      <Search />
    </el-icon>
    <span style="vertical-align: middle"> Search </span>
  </el-button>
</template>
```