技术参考

实现

第一步：创建 Electron + Vite 模板

使用官方推荐 Electron Vite 模板命令

npm init electron-app@latest my-new-app -- --template=vite 

安装过程提示

> npm init electron-app@latest my-new-app -- --template=vite ✔ Locating custom template: "vite" ✔ Initializing directory ✔ Preparing template ✔ Initializing template ✔ Installing template dependencies 

安装完后的目录

# 目录结构 . ├─ src                      # 主代码 |   ├─ index.css            # 样式文件 renderer.js 文件中引入 |   ├─ main.js              # 主进程脚本，初始化应用 |   ├─ preload.js           # 预加载脚本  |   └─ renderer.js          # 渲染进程脚本 ├─ forge.config.js          # forge 配置 ├─ forge.env.d.ts           # forge 环境  ├─ package-lock.json        # lock  ├─ package.json             # 插件依赖 ├─ vite.base.config.mjs     # vite 基础配置  ├─ vite.main.config.mjs     # vite 主配置  ├─ vite.preload.config.mjs  # vite 预加载配置 └─ vite.renderer.config.mjs # vite 渲染配置 

查看 package.json 默认安装了如下插件

{     "dependencies": {         "@element-plus/icons-vue": "2.3.1",         "electron-squirrel-startup": "1.0.1",         "element-plus": "2.7.7",         "vue": "3.4.33"     },   	"devDependencies": {         "@electron-forge/cli": "7.4.0",         "@electron-forge/maker-deb": "7.4.0",         "@electron-forge/maker-rpm": "7.4.0",         "@electron-forge/maker-squirrel": "7.4.0",         "@electron-forge/maker-zip": "7.4.0",         "@electron-forge/plugin-auto-unpack-natives": "7.4.0",         "@electron-forge/plugin-fuses": "7.4.0",         "@electron-forge/plugin-vite": "7.4.0",         "@electron/fuses": "1.8.0",         "electron": "31.2.1",         "vite": "5.3.4"     } } 

启动效果如下

npm run start 

第二步：融合 Vue3

参考官方指南中文/英文，安装 Vue3 相关插件

# vue3 插件 npm i vue  # vite vue3 插件 npm i @vitejs/plugin-vue -D 

修改文件 src/index.html ，加上 id="app"。 标签中仅有两行代码，如下

新建文件 src/App.vue

修改文件 src/renderer.js

import { createApp } from 'vue' import App from './App.vue'  const app = createApp(App) app.mount('#app') 

文件 vite.renderer.config.mjs 中配置 Vue 插件

import vue from '@vitejs/plugin-vue'  export default defineConfig((env) => {   return {     plugins: [       vue(),     ],   }; }); 

第三步：配置 Sass

安装 sass 和 sass-loader 插件

npm i sass sass-loader -D 

然后就可在 *.vue 组件中直接使用

第四步：配置 ElementPlus

安装 element plus 和 Icon 图标(需要单独安装)

npm i element-plus  npm i @element-plus/icons-vue 

新建文件 src/utils/elements.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'  export const registerElIcon = (app) => {     // 全局注册图标 会牺牲一点性能 ElIconXxxx     for (let i in ElementPlusIconsVue) {         let name = `ElIcon${i}`;         app.component(name, ElementPlusIconsVue[i])         console.log(name, ElementPlusIconsVue[i]);     } } 

App.vue 中设置 svg 高宽

src/remderer.js 全局引入

• 代码第5-6行，引入所有图标和转行方法；

• 代码第12行，全局注册图标组件，且****使用方式有改变****；

• 代码 4, 10 行，可配置成中文；

import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import zhCn from 'element-plus/dist/locale/zh-cn.mjs' // 配置中文 import 'element-plus/dist/index.css' import { registerElIcon } from './utils/elements'  const app = createApp(App)  app.use(ElementPlus, { locale: zhCn }) // 使用中文 // 全局注册 el-icon registerElIcon(app); app.mount('#app') 

同样，有两种使用方式：

1. 结合 el-icon 使用，提供了额外的属性，如：is-loading等；
2. 直接使用 SVG 图标，当做一般的 svg 使用；

第五步：测试

新建文件 src/components/Btns.vue。此文件可测试 ElementPlus 和 Icon 功能是否可用

放入主页 src/App.vue

启动

npm run start 

效果如下

打包

暂无时间研究，可参考：

• Squirrel.Windows

• Zip

最后

还在学习中，作为一名资深前端(哈哈哈…自诩…)，发现 Electron 越来越有趣~