技术参考
技术 | 描述 |
---|---|
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
越来越有趣~