超详细！！！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-renderer
      renderer: 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,那么组件使用就变成 <ep-edit/>
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文件进行自动导入路径配置

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