阅读量:0
技术参考
| 技术 | 描述 |
|---|---|
| Electron | 一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js |
| Electron Forge | 用于打包和分发 Electron 应用程序的一体化工具。英文地址在此 |
| Vite | 前端构建工具 |
| Vue3 | 用于构建用户界面的 JavaScript 框架 |
| @vitejs/plugin-vue | Vite 插件，提供 Vue 单文件组件支持 |
| Element Plus | 基于 Vue3 的 UI组件库 |
| Sass | CSS 预处理语言 |
实现
第一步：创建 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 插件 npm i vue # vite vue3 插件 npm i @vitejs/plugin-vue -D 修改文件 src/index.html ，加上 id="app"。<body> 标签中仅有两行代码，如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World!</title> </head> <body> <div id="app"></div> <script type="module" src="/src/renderer.js"></script> </body> </html> 新建文件 src/App.vue
<script setup> console.log("👋 该日志由 App.vue 记录。") </script> <template> <h1>💖 你好！世界！ 💖</h1> <p>欢迎使用你的 Electron 程序。</p> </template> 修改文件 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 组件中直接使用
<style lang="scss" > .main { width: 300px; height: 250px; } </style> 第四步：配置 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 高宽
<style> svg { width: 1rem; height: 1rem; } </style> 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') 同样，有两种使用方式：
- 结合
el-icon使用，提供了额外的属性，如：is-loading等； - 直接使用
SVG图标，当做一般的svg使用；
<!-- 使用 el-icon 为 SVG 图标提供属性 --> <el-icon :size="size" :color="color"> <ElIconEdit /> </el-icon> <!-- 或者独立使用它，不从父级获取属性 --> <ElIconEdit /> 第五步：测试
新建文件 src/components/Btns.vue。此文件可测试 ElementPlus 和 Icon 功能是否可用
<template> <div> <el-button>Default</el-button> <el-button type="primary" icon="el-icon-folder-add">Primary</el-button> <el-button type="success" icon="ElIconFolderAdd">Success</el-button> <el-button type="info"> <el-icon :color="color"> <ElIconEdit /> </el-icon> Info </el-button> <el-button type="warning"><ElIconEdit />Warning</el-button> <el-button type="danger">Danger</el-button> </div> </template> 放入主页 src/App.vue
<script setup> import Btns from './components/Btns.vue' console.log("👋 该日志由 App.vue 记录。") </script> <template> <h1>💖 你好！ </h1> <h2>💖 Electron + Vite + Vue3 + Sass</h2> <!-- 测试 组件 --> <Btns /> </template> <style lang="scss" > svg { width: 1rem; height: 1rem; } </style> 启动
npm run start 效果如下
打包
暂无时间研究，可参考：
最后
还在学习中，作为一名资深前端(哈哈哈…自诩…)，发现 Electron 越来越有趣~
