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

news2024/11/15 17:51:27

技术参考

技术	描述
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-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>

启动