在src 创建global文件夹

1.在文件夹新建 index.ts和register-element.ts

image.png

index.ts

import { App } from "vue";

import registerElement from "./register-element";

export function globalRegister(app: App): void {
  app.use(registerElement);
  // registerElement(app);   //也可以这么写
}

register-element.ts

import { App } from "vue";

import "element-plus/dist/index.css";

import {
  ElAlert,
  ElAside,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadio,
} from "element-plus";

const components = [
  ElAlert,
  ElAside,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadio,
];

export default function (app: App): void {
  for (const component of components) {
    app.component(component.name, component);
  }
}

在main.ts 里

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { globalRegister } from "./global";

const app = createApp(App);

app.use(globalRegister);
// globalRegister(app); 也可以这么写

app.use(store).use(router).mount("#app");

使用按钮

image.png

第二种跟简单

安装

yarn add element-plus -S
cnpm i  unplugin-vue-components unplugin-auto-import -D

安装unplugin-vue-components 和 unplugin-auto-import这两款插件

// 然后修改vue.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  configureWebpack: {
    // 配置webpack按需自动引入element-plus
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
}

但是icon 组件库需要单独引入

<template>
  // App.vue 页面上直接引入组件即可.
  <el-button type="primary" :icon="Edit">asdas</el-button>
  <el-button type="success" :icon="Delete">sadasds</el-button>
</template>

<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
</script>

image.png