超详细！！！electron-vite-vue开发桌面应用之引入UI组件库element-plus（四）

云风网
云风笔记
云风知识库

一、安装element-plus以及图标库依赖

npm install element-plus --save
npm install @element-plus/icons-vue
npm i -D unplugin-icons

二、vite按需引入插件

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

unplugin-vue-components是一个用于Vue.js的插件，它允许你导入Vue组件，而不需要在你的代码中显式地导入它们。这个插件可以让你按需导入组件，从而减少初始加载大小。

unplugin-auto-import是一个用于Vue.js的插件，它可以自动导入Vue.js的相关API，如Vue自身，Vue的RFC(响应式)，Composition API，以及其他一些常用的Vue功能。

三、vite.config.ts文件配置引用element-plus

import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'//自动导入相关api
import Components from 'unplugin-vue-components/vite'//按需导入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// https://vitejs.dev/config/
export default defineConfig({plugins: [AutoImport({resolvers: [// 自动导入elementPlus组件ElementPlusResolver(),// 自动导入图标组件 IconsResolver({prefix: 'Icon',})],dts: path.resolve(__dirname, 'types/auto-imports.d.ts')}),Components({resolvers: [ElementPlusResolver(),// 自动注册图标组件IconsResolver({enabledCollections: ['ep'],})],dts: path.resolve(__dirname, 'types/components.d.ts')}),//图标的导入配置Icons({autoInstall: true,}),vue(),electron({main: {// Shortcut of `build.lib.entry`.entry: 'electron/main.ts',onstart(args) {args.reload()// args.startup()}},preload: {// Shortcut of `build.rollupOptions.input`.// Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.input: path.join(__dirname, 'electron/preload.ts'),},// Ployfill the Electron and Node.js API for Renderer process.// If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.// See 👉 https://github.com/electron-vite/vite-plugin-electron-rendererrenderer: process.env.NODE_ENV === 'test'// https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808? undefined: {},}),],
})

四、element-plus应用到页面

 <el-button type="success" @click="count++">count is {{ count }}</el-button><el-icon><IEpPlus/></el-icon><i-ep-delete />

页面渲染效果如下

注意事项

Iconify 图标结构由三部分组成：{prefix}-{collection}-{icon}
prefix：icon的前缀，默认值为’i’,可设置成false,如果设置成false,那么组件使用就变成
collection: 默认是iconify
icon: 图标集中对应的图标名字
collection对应的是 enabledCollections配置，默认是iconify上的所有图标。这里设置的是[‘ep’]，表示的是Iconify 中的 element-plus 的图标，也可以设置mdi、ant-design，它会自动根据名称在package.json下载安装对应的图标集
Icons()表示会自动安装@iconify-json/ep的依赖，设置为true,他就会自动安装iconify 图标。

四、补充说明插件unplugin-vue-components和unplugin-auto-import

1、安装依赖运行后，根目录自动生成两个ts声明文件

components.d.ts

/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}/* prettier-ignore */
declare module 'vue' {export interface GlobalComponents {ElButton: typeof import('element-plus/es')['ElButton']HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']}
}

auto-imports.d.ts

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {}

这里直接注释app.vue中组件的引入代码

<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
</script>

再次运行项目，组件正常显示，因为已经插件自动引入，无需手动页面路径引用

2、对于d.ts文件进行模块化管理

vite.config.ts文件进行自动导入路径配置

再次运行项目，组件正常显示