探索 Electron：怎样使用Electron和Vite打造高效桌面应用

Electron是一个开源的桌面应用程序开发框架，它答应开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够使用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发服从和应用程序的快速交付具有重要意义。
  目录
初始项目搭建
目录文件详解
路由配置管理
公共堆栈配置

---

初始项目搭建

        在开发Electron桌面应用之前必要进行情况的配置，对于内部来说必要安装三个大件，也就是我之前所说的 Chromium、Node.js、Native apis，显然的话我们必要提前具备node的开发情况的，这对于前端开发者来说肯定不是题目，如果不是请参考我之前的文章进行安装：地址 ，vite团队已经帮助我们和谐electron进行开发了  地址，接下来我们探究一下怎样在vite中使用electron：

至于Chromium和Native apis的话，我们就必要再下载Electron这样一个包去进行获取，这里拿vite进行一个简单的演示，这边参考我之前的文章：超详细教程——vite脚手架的搭建与使用 ，安装一下vite搭配的vue情况，最终得到网页版web页面如下：

​
接下来我们要开始借助electron-vite开发桌面端应用，必要终端实行如下下令安装electron： 
  

1. # npm
2. npm create @quick-start/electron@latest
4. # yarn
5. yarn create @quick-start/electron
7. # pnpm
8. pnpm create @quick-start/electron

复制代码

这里就记住平常使用的npm进行安装吧，实行下令之后输入项目名称选择对应模板，这里就选vue进行讲解吧，如下：

根据需求选择是否使用TS，博主写项目一样平常都选择TS，这里也就选择TS吧：

是否添加electron更新的插件，当然必须选上：

是否下载electron的镜像代理，这里也选上吧：

配置完成之后，切换到对应项目目录，终端实行 npm i 安装好依靠，终端实行 npm run dev，可以看到我们的项目已经跑起来了，初识页面看着也是非常的简约大气，项目也是给我们默认配置好了相关的插件便于代码的誊写：

目录文件详解

electron-vite-vue项目其实和我们平常使用的vite-vue项目基本上大差不差，无非是多了几个文件夹而已，这里我们就比平常额外多出的文件夹的作用做一个简单的详解：
out：该文件是主历程和渲染历程中间桥梁的一个文件夹，默认情况下，构建输出将放置在out(相对于项目根目录)。

1. ├──out/
2. │  ├──main
3. │  ├──preload
4. │  └──renderer
5. └──...

复制代码

当然也可以通过下令行来重新指定它，比方 electron-vite dev/build/preview --outDir=dist：

resources：用于放置一些静态文件，像桌面端的应用图标就是该目录下的静态文件：

src：用于存放真正的项目代码的文件，区别于从前的vite项目，该文件夹下存放有三个文件，分别代表着主历程、预加载脚本、渲染历程这三个文件，如下所示：

electron.vite.config.ts：相称于我们vite项目内里的vite.config.ts配置文件，

1. import { resolve } from 'path'
2. import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
3. import vue from '@vitejs/plugin-vue'
5. export default defineConfig({
6.   main: {
7.     plugins: [externalizeDepsPlugin()]
8.   },
9.   preload: {
10.     plugins: [externalizeDepsPlugin()]
11.   },
12.   renderer: {
13.     resolve: {
14.       alias: {
15.         '@renderer': resolve('src/renderer/src')
16.       }
17.     },
18.     plugins: [vue()]
19.   }
20. })

复制代码

路由配置管理

对于桌面端应用来说，用户也是必要进行不同界面的跳转的，这里就必要我们配置一下路由进行页面的跳转，如果想更加深入了解vue3路由知识，推荐参考我之前的文章：地址 ，终端实行如下下令进行安装路由：

1. npm install vue-router

复制代码

安装完路由包之后，接下来我们要先创建路由组件，我们必要在渲染历程下的src目录下新建views文件，再创建3个路由组件进行测试：

创建完路由组件之后，接下来开始进行相关router配置，我们必要在渲染历程renderer文件夹下的src文件夹下新建router文件，如下：

1. // 通过vue-router插件实现模板路由配置
2. import { createRouter, createWebHistory } from 'vue-router'
3. import { constantRoute } from './routes'
5. // 创建路由器
6. const router = createRouter({
7.   // 路由模式
8.   history: createWebHistory(),
9.   routes: constantRoute,
10.   // 滚动行为
11.   scrollBehavior() {
12.     return {
13.       left: 0,
14.       top: 0,
15.     }
16.   },
17. })
18. export default router

复制代码

这里我单独将routes的属性对象抽离出一个ts文件出来 ，便于后期的维护，代码如下：

1. // 对外暴露路由(常量路由)
2. export const constantRoute = [
3.     {
4.         path: '/login',
5.         name: 'login', // 命名路由
6.         component: () => import('@renderer/views/login/index.vue'),
7.         meta: {
8.             title: '登录页面',
9.         },
10.     },
11.     {
12.         path: '/',
13.         name: 'home',
14.         component: () => import('@renderer/views/home/index.vue'),
15.         meta: {
16.             title: '后台页面',
17.         },
18.     },
19.     {
20.         path: '/404',
21.         name: '404',
22.         component: () => import('@renderer/views/404/index.vue'),
23.         meta: {
24.             title: '404界面',
25.         },
26.     },
27.     {
28.         path: '/:pathMatch(.*)*',
29.         name: 'any',
30.         redirect: '/404',
31.     },
32. ]

复制代码

接下来在入口文件 main.ts 处进行路由router的挂载：

如果想把写好的路由进行展示的话，必要通过 router-view 作为路由出口，路由匹配到的组件将进行相应的渲染，这里在App根组件上进行展示，通过 router-link 来进行路由的跳转，如下：

1. <template>
2.   <div class="container">
3.     <router-link to="/login">登录</router-link> &nbsp;
4.     <router-link to="/">首页</router-link> &nbsp;
5.     <router-link to="/ab1212out">随便乱输入</router-link>
6.     <router-view></router-view>
7.   </div>
8. </template>

复制代码

最终呈现的结果如下所示：

公共堆栈配置

对于桌面端应用来说，用户可能也是必要进行登录注册的，这里我们就必要通过堆栈对用户的信息进行一个存储供全局进行使用，这里的话我们就使用pinia堆栈管理工具进行使用，不了解pinia的朋友，推荐看一下我之前讲解的文章：地址 ，本文就不再偏重讲解其具体知识。
因为堆栈一样平常也是必要进行长期化管理的，这里顺便把pinia长期化插件也进行安装，这里我们借助pinia的一个长期化存储插件 pinia-plugin-persistedstate ，其运行机制就是，在设置state的时间会主动把数据同步给localstorage，在获取state数据的时间会优先从localStorage中取，终端实行如下下令进行安装pinia：

1. npm install pinia pinia-plugin-persistedstate

复制代码

安装完pinia和长期化插件之后，我们必要对其进行一个注册， 在src目录下新建store文件夹，文件夹下新建 index.ts 文件，暴露如下代码：

1. // 设置pinia仓库
2. import { createPinia } from 'pinia'
3. import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
5. const pinia = createPinia()
6. // 注册持久化插件
7. pinia.use(piniaPluginPersistedstate)
8. // 对外暴露：入口文件需要安装仓库
9. export default pinia

复制代码

创建完堆栈代码之后，必要在main.ts入口文件出进行pinia的挂载：

1. import { createApp } from 'vue'
2. import App from './App.vue'
3. // 导入路由组件
4. import router from './router'
5. // 导入仓库
6. import pinia from './store'
9. createApp(App)
10.     .use(router) // 注册路由
11.     .use(pinia) // 安装仓库
12.     .mount('#app')

复制代码

接下来在store中新建文件夹modules用于存储堆栈文件，在该文件夹创建一个login.js文件，用来存储登录相关数据，这里采用组合式API的写法，如下案例：

1. // 登录模块仓库
2. import { defineStore } from "pinia";
3. import { ref } from "vue"
5. export const useMemberStore = defineStore("login", () => {
6.     const profile = ref();
7.     const setProfile = (val: number) => {
8.         profile.value = val;
9.     }
10.     const clearProfile = () => {
11.         profile.value = undefined
12.     }
13.     return { profile, setProfile, clearProfile }
14. }, { persist: true }) // 开启持久化

复制代码

背面基本上就是纯vite-vue的项目配置开发了，这里不再赘述，详情请参考我之前的文章：地址 ，这篇文章内里的项目创建的底子配置还是比力全面的，各人可以去了解一下。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。