当前位置: 首页> 科技> 互联网 > 超详细!!!electron-vite-vue开发桌面应用之引入UI组件库element-plus(四)

超详细!!!electron-vite-vue开发桌面应用之引入UI组件库element-plus(四)

时间:2025/7/9 7:04:30来源:https://blog.csdn.net/qq_43206280/article/details/141192465 浏览次数:0次

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

一、安装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文件进行自动导入路径配置

在这里插入图片描述
再次运行项目,组件正常显示

关键字:超详细!!!electron-vite-vue开发桌面应用之引入UI组件库element-plus(四)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: