跳到主要内容

搭建Electron+Vue3开发环境

· 阅读需 3 分钟
文浩Marvin

image-20220316204205165

之前用 electron-vue 写过一个半成品的桌面端应用,但是是基于 Vue2 的,最近又想重写点桌面端应用,想要上 Vue3+TypeScript,于是便有了这篇文章总结下具体的搭建过程。

Vue Cli

Vue CLI 有一个插件vue-cli-plugin-electron-builder,可以非常方便的搭建 electron 环境。

npm i @vue/cli -g
vue create my-app

根据自己项目的需求选择对应的依赖(例如 Babel,TS,Vuex 等等)

Vue CLI v5.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No


Vue CLI v5.0.3
✨ Creating project in F:\Electron\my-app.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...

安装 vue-cli-plugin-electron-builder

Vue CLI Plugin Electron Builder (nklayman.github.io)

cd my-app
vue add electron-builder

安装过程中会提示你选择 Electron 的版本,选择最新版本即可

启动项目

npm run electron:serve

参考文章:Electron + Vue3 开发跨平台桌面应用【从项目搭建到打包完整过程】 - 掘金 (juejin.cn)

error  in ./src/background.ts

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function

我测试的时候,@vue/cli-plugin-typescript版本为~5.0.0,就会导致编译类型出错,将 package.json 中改为"@vue/cli-plugin-typescript": "~4.5.15",即可正常运行(但还是会有 DeprecationWarning)

Vite

上面是使用 Vue Cli 脚手架进行开发,如果想上 Vite 的话,就需要用 Vite 来构建项目,然后安装 electron 的相关依赖。

这个不是作为重点,因为很多大佬都已经写了现成的模板,完全可以自行借鉴学习,就贴几个阅读过的几篇文章

Vite + Vue 3 + electron + TypeScript - DEV Community

2021 年最前卫的跨平台开发选择!vue3 + vite + electron - 知乎 (zhihu.com)

现成的模板

均可在 github 上搜索到

electron-vite 脚手架(推荐)

当然也可以使用脚手架,可选择 React 与 Vue,实际上也就是创建上面的前两个模板

npm create electron-vite

现有项目使用 electron

TODO...

总结

因为 Electron 本质上还是一个浏览器,无论是 Vue 还是 React 开发也好,在传统网页开发的时候都有对应的调试地址,如http://127.0.0.1:3000,而electron的做法无非就是开启一个浏览器,然后和正常的网页开发一样,并提供桌面端的api使用。

目前社区两大 Vue+Electron 的脚手架主要是electron-vuevue-cli-plugin-electron-builder,更多 electron 的开源项目都遵循着前者的项目结构,像上面的模板也就是。

以上就是我所使用 Vue3 来开发 Electron 的环境搭建过程,总体来说从 Electron 除了应用体积过大,对于前端开发者来说是非常友好的,既然环境配置完,那么现在就可以开始好好的编写桌面端应用了。

Loading Comments...