1、安装

npm install element-plus --save

修改main.ts

import { createApp } from 'vue'
import App from './App.vue'

//引入 pinia store
import { createPinia } from 'pinia'


//引入 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' 

 



// createApp(App).mount('#app')

const pinia = createPinia()
const app =createApp(App) 
app.use(pinia)
app.use(ElementPlus)
app.mount('#app')

5、测试element

<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger" disabled>Danger</el-button>
    <el-button  type="text">中文</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>

  <el-row>
    <el-button :icon="Search" circle></el-button>
    <el-button type="primary" :icon="Edit" circle></el-button>
    <el-button type="success" :icon="Check" circle></el-button>
    <el-button type="info" :icon="Message" circle></el-button>
    <el-button type="warning" :icon="Star" circle></el-button>
    <el-button type="danger" :icon="Delete" circle></el-button>
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary">
      Upload<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>

    
  </el-row>

  <el-row>
       <el-button-group>
    <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
    <el-button type="primary">
      Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button>
      <el-button type="primary" :icon="Share"></el-button>
       <el-button type="primary" loading>Loading</el-button>
  </el-button-group>
  </el-row>
</template>

<script lang="ts" setup>
import { mainStore } from "../store/index";
import {
  Search,
  Edit,
  Check,
  Message,
  Star,
  Delete ,
  Upload,
   ArrowLeft, 
  Share, 
  ArrowRight,
  Loading
} from '@element-plus/icons-vue';

const store = mainStore();
 
</script>

<style lang="scss" scoped></style>

 至此已经成功引入。