当前位置：首页 > news >正文

基于 Electron+Vite+Vue3+Sass 框架搭建

news 来源：原创 2024/9/19 9:20:30

技术参考

技术	描述
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 相关插件

# 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-plusnpm i @element-plus/icons-vue

新建文件 src/utils/elements.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'export const registerElIcon = (app) => {// 全局注册图标 会牺牲一点性能 ElIconXxxxfor (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>

启动