整合 Element Plus

      npm install -D unplugin-auto-import unplugin-vue-components 
    

      import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";

plugins: [
  AutoImport({
    // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
    imports: ["vue"],
    eslintrc: {
      enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false 
      filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件
    },
    dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径
  }),
  Components({
    dts: path.resolve(pathSrc, "types", "components.d.ts"), // 指定自动导入组件TS类型声明文件路径
  }),
]
    

      "extends": [
    "./.eslintrc-auto-import.json"
],
    

      {
  "include": ["src/**/*.d.ts"]
}
    

      npm install element-plus
    

      npm i -D unplugin-icons
    

      // vite.config.ts
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

export default ({ mode }: ConfigEnv): UserConfig => {

  return {
    plugins: [
      // ...
      AutoImport({
        // ...  
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({}),
        ]
        vueTemplate: true, // 是否在 vue 模板中自动导入
        dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts') // 自动导入组件类型声明文件位置，默认根目录
          
      }),
      Components({ 
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ["ep"] // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
          }),
        ],
        dts: path.resolve(pathSrc, "types", "components.d.ts"), //  自动导入组件类型声明文件位置，默认根目录
      }),
      Icons({
        // 自动安装图标库
        autoInstall: true,
      }),
    ],
  };
};
    

      <!-- src/components/HelloWorld.vue -->
<div>
  <el-button type="success"><i-ep-SuccessFilled />Success</el-button>
  <el-button type="info"><i-ep-InfoFilled />Info</el-button>
  <el-button type="warning"><i-ep-WarningFilled />Warning</el-button>
  <el-button type="danger"><i-ep-WarnTriangleFilled />Danger</el-button>
</div>
    

      <el-button 
   v-show="!scope.row.userRole.includes('admin')" 
   link type="primary" 
   size="small" 
   @click="deleteUser(scope)"
>删除</el-button>
    

      // 子组件
<template>
  <el-tag :type="tagType">{{ tagContent }}</el-tag>
</template>

<script setup lang="ts">
import { defineProps, computed, ref } from 'vue';

const props = defineProps({
  value: {
	type: String,
	required: true
  },
});

const tagType = computed(() => {
  if (props.value === 'admin') {
	return 'success';
  } else if (props.value === 'user') {
	return 'warning';
  } else if (props.value === 'ban') {
	return 'danger';
  } else {
	return 'info';
  }
});

const tagContent = computed(() => {
  if (props.value === 'admin') {
	return '超级管理员';
  } else if (props.value === 'user') {
	return '普通用户';
  } else if (props.value === 'ban') {
	return '封号';
  } else {
	return '信息';
  }
});
</script>

//父组件
<el-table-column  label="权限" width="120px">
		<template #default="scope">
		  <tag-component :value="scope.row.userRole"></tag-component>
    </template>
</el-table-column>
    

      <div v-for="(domain, index) in dynamicValidateForm.judgeCase" :key="index" class="wrapper">
		<el-form-item
		  label="判题输入用例"
		  :prop="'judgeCase.' + index + '.input'"
		  :rules="{
			required: true,
			message: '判题输入用例不能为空',
			trigger: 'blur',
		   }"
		>
		  <el-input v-model="domain.input" />
		</el-form-item>
		<el-form-item
				label="判题输出用例"
				:prop="'judgeCase.' + index + '.output'"
				:rules="{
				  required: true,
				  message: '判题输出用例不能为空',
				  trigger: 'blur',
				 }"
		>
		  <el-input v-model="domain.output" />
		</el-form-item>
		<el-form-item label-width="900">
		  <el-button
				  class="mt-2"
				  type="danger"
				  style="position: relative;top: -58px;left: 120px"
				  @click.prevent="removeDomain(domain)"
		  >删除判题用例</el-button>
		</el-form-item>
	  </div>