electron-vite【实战系列教程】-CSDN博客

本文链接：https://blog.csdn.net/weixin_43932886/article/details/144681290

创建项目

安装必要的插件

UI 库 element-plus

npm install element-plus --save

安装 element-plus 图标

npm install @element-plus/icons-vue

安装插件 – 自动注册组件 vs 自动导入框架方法

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

electron.vite.config.ts 中添加

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

plugins 中添加

AutoImport({
        // 解析的文件类型
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/, // .vue
          /\.md$/ // .md
        ],
        // 需自动导入方法的库
        imports: ['vue'],
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })

src/renderer/src/main.ts 中添加

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}