elementPlus——图标引入+批量注册全局组件——基础积累

因为我们要根据路由配置对应的图标，也要为了后续方便更改。因此我们将所有的图标注册为全局组件。（使用之前将分页器以及矢量图注册全局组件的自定义插件）（所有图标全局注册的方法element-plus文档中已给出）

全局注册elementPlus图标

经过上面的步骤，就可以把elementPlus自带的icon图标全局注册了。

路由使用elementPlus图标

给路由元信息添加属性：icon
以layout和其子组件为例：首先在element-puls找到你要使用的图标的名字。将它添加到路由元信息的icon属性上

{
  //登录成功以后展示数据的路由
  path: '/',
  component: () => import('@/layout/index.vue'),
  name: 'layout',
  meta: {
    title: 'layout',
    hidden: false,
    icon: 'Avatar',//elementPlus中的图标
  },
  children: [
    {
      path: '/home',
      component: () => import('@/views/home/index.vue'),
      meta: {
        title: '首页',
        hidden: false,
        icon: 'HomeFilled',//elementPlus中的图标
      },
    },
  ],
},

外部引入的svg图标——vite.config.js中批量引入

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default defineConfig(({command,mode})=>{
	const env = loadEnv(mode,process.cwd())
	return {
		plugins:[
			vue(),
		    AutoImport({
		        resolvers: [
		          ElementPlusResolver(),
		          IconsResolver({
		            prefix: 'Icon',
		          }),
		        ],
		      }),
		    Components({
		        resolvers: [
		          ElementPlusResolver(),
		          IconsResolver({
		            enabledCollections: ['ep'],
		          }),
		        ],
		      }),
		    Icons({
		        autoInstall: true,
		      }),
		    createSvgIconsPlugin({
		        // Specify the icon folder to be cached
		        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
		        // Specify symbolId format
		        symbolId: 'icon-[dir]-[name]',
		    }),
		]
	}
})

然后svg图标的使用，例如全屏图标：

<el-button icon="FullScreen" circle @click="fullScreen" />

顺道写下全屏功能的实现：

<script lang="ts" setup>
import {reactive,ref} from 'vue';
//全屏功能
const fullScreen = ()=>{
	//用来判断是不是全屏，返回布尔值
	const full = document.fullscreenElement
	//有兼容问题
	if(full){
		document.exitFullscreen();
	}else{
		document.documentElement.requestFullscreen();
	}
}
</script>

components中的组件全局批量注册——避免使用时多次引入

步骤一：在components文件夹中新建index.ts文件

步骤二：在index.ts文件中引入各个组件

import SvgIcon from './SvgIcon/index.vue'
import Category from '@/components/Category/index.vue'

步骤三：使用vue中的App和Component

import type { App, Component } from 'vue'
const allGlobalComponent: Component = { SvgIcon, Category }

步骤四：使用install方法来处理

export default {
  install(app: App) {
    Object.keys(allGlobalComponent).forEach((key: string) => {
      // 注册为全局组件
      app.component(key, allGlobalComponent[key])
    })
  },
}

结合文章中第一步的全局引入elementPlus图标，也可以放在此文件中：
完整代码如下：

import SvgIcon from './SvgIcon/index.vue'
import Category from '@/components/Category/index.vue'
import type { App, Component } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const allGlobalComponent: Component = { SvgIcon, Category }
export default {
  install(app: App) {
    Object.keys(allGlobalComponent).forEach((key: string) => {
      // 注册为全局组件
      app.component(key, allGlobalComponent[key])
    })
    // 将 element-plus 的图标注册为全局组件
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
    }
  },
}

main.ts中引入components

import globalComponent from './components/index'
const app = createApp(App)
app.use(globalComponent)

完成！！！多多积累，多多收获！！！

下面的内容跟文章相关不大，仅为了凑字数，可忽略！！！

Element Plus是一个基于Vue.js 3.0的UI库，是Element UI的升级版。它提供了一套漂亮、易于使用和自定义的组件，如按钮、输入框、表格、弹窗、日期选择器等。Element Plus的设计理念注重用户体验和响应式设计，所有组件都可以自适应不同屏幕大小以提供良好的用户体验。 Element Plus还有更好的性能和更好的 API 设计, 它遵循更好的 Reactivity 和 Function API, 并且使用了更符合 Vue.js 用户习惯的 Composition API。

Element Plus与Element UI相比有一些重要的变化，例如Element Plus使用Vue.js 3.0，废弃了依赖和拦截器，优化了性能和API设计，更新了主题和组件样式，并且去掉了有些过时的组件，增加了一些更实用和流行的组件（如Slider），支持多语言和自定义主题。

总之，Element Plus是一个功能强大、易于使用和定制的Vue.js UI库，提供了许多实用的组件和功能，并且可以按照自己的需求进行配置和扩展。它适用于各种类型的Web应用程序、移动应用程序和桌面应用程序。

一，何为Element UI 及 Element Plus？

它们是前端框架。它是包含很多有自己风格的组件库。
Element目前有两个版本：element-ui 及 element-plus两个版本。
它将HTML的基础控件进行了封装，用户只需要调用这些控件就可以了。而不需要用CSS去调整风格。
Element UI是一款基于Vue2.x 的界面框架；Element Plus是一款基于Vue3.x 的界面框架；
既然基于Vue，所以可以使用打包工具打包，例如 Vite或WePack

当然Element UI与有React及Angular的版本了。

二、Element UI 与 Element Plus区别？

Element UI框架的升级版（3.x）是Element Plus；Element Plus 目前还处于快速开发迭代中
由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器
Element-Plus 已经把vue的版本锁定了3.x；而Element UI是基于Vue 2.