unplugin 自动导入

Element Plus 官方文档中推荐 按需自动导入 的方式，而此需要使用额外的插件 unplugin-auto-import 和 unplugin-vue-components 来导入要使用的组件。所以在整合 Element Plus 之前先了解下自动导入的概念和作用

概念

为了避免在多个页面重复引入 API 或 组件，由此而产生的自动导入插件来节省重复代码和提高开发效率。

插件	概念	自动导入对象
unplugin-auto-import	按需自动导入API	ref，reactive,watch,computed 等API
unplugin-vue-components	按需自动导入组件	Element Plus 等三方库和指定目录下的自定义组件

看下自动导入插件未使用和使用的区别：

插件名	未使用自动导入	使用自动导入
unplugin-auto-import
unplugin-vue-components

安装插件依赖

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

vite.config.ts - 自动导入配置

新建 /src/types 目录用于存放自动导入函数和组件的TS类型声明文件

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类型声明文件路径
  }),
]

.eslintrc.cjs - 自动导入函数 eslint 规则引入

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

tsconfig.json - 自动导入TS类型声明文件引入

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

自动导入效果

运行项目 npm run dev 自动

安装 Element Plus

提示

参考： element plus 按需自动导入 (opens new window)

需要先完成 unplugin 自动导入的安装和配置

npm install element-plus

安装自动导入 Icon 依赖

npm i -D unplugin-icons

vite.config.ts 配置

参考： element-plus-best-practices - vite.config.ts (opens new window)

// 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-table隐藏某一行的某个操作按钮

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

el-tag根据不同的值自定义显示不同的文字

// 子组件
<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>

题目创建页(el-form传数组对象,对象直接传就行)

<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>