如何使用Vue + Electron搭建跨平台应用

简介: • Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架• Vue.js: Web 前端用于构建用户界面的渐进式框架• Vuetify: Vue.js 的 Material Design 组件框架看完以上介绍,也明白了本文要做的事:用 Vue.js 与 Vuetify 组件,基于 Electron 来创建原生桌面应用。

]YZV{]Y2N_2OH~_)376PCZJ.png

基础介绍


  • Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架
  • Vue.js: Web 前端用于构建用户界面的渐进式框架
  • Vuetify: Vue.js 的 Material Design 组件框架

看完以上介绍,也明白了本文要做的事:用 Vue.js 与 Vuetify 组件,基于 Electron 来创建原生桌面应用。


环境准备


Visual Studio Code

建议使用的 VS Code 编辑代码,下载地址: https://code.visualstudio.com/

同时可安装如下些扩展:

  • ESLint: 代码检查
  • Prettier - Code formatter: 代码格式化
  • Vetur: Vue 代码工具
  • Vue 2 Snippets: Vue 代码提示(可选)

查看 VS Code 版本:

$ code -v
1.46.1
cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
x64


Node.js

Node.js 开发环境,下载地址: https://nodejs.org/en/download/

建议选择 Latest LTS Version ,因为 Electron v9 仍旧使用的 Node.js v12 。

查看 Node, NPM 版本:

$ node -v
v12.18.1
$ npm -v
6.14.5

Yarn

Yarn 包管理工具,相比 NPM 而言: Fast, Reliable, Secure 。

GitHub: https://github.com/yarnpkg/yarn

全局安装 Yarn :

npm config set registry https://registry.npm.taobao.org
npm install -g yarn

查看 Yarn 版本:

$ yarn -v
1.22.4

Vue CLI

Vue CLI 是 Vue.js 开发的标准工具。

GitHub: https://github.com/vuejs/vue-cli

全局安装 Vue CLI :

yarn global add @vue/cli

查看 Vue CLI 版本:

$ vue -V
@vue/cli 4.4.6

创建 Vue.js 应用


vue create my-app

跟随引导进行工程配置,如下:

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: Yarn

~/.vuerc 会保存一些可复用的 preset :

$ cat ~/.vuerc

$ cat ~/.vuerc
{
  "useTaobaoRegistry": true,
  "packageManager": "yarn"
}

运行应用:

cd my-app
yarn serve

浏览器打开 http://localhost:8080/

69UEY[2BC})PK{)O83CS0CQ.png


添加 Vuetify 组件

Vuetify 是 Vue.js 的 Material Design 组件库。也可以换用其他的,如 Element 等。

GitHub: https://github.com/vuetifyjs/vuetify

添加 Vuetify :

cd my-app
vue add vuetify

preset 选择 Default

? Choose a preset: Default (recommended)

添加完成后,编辑下 tsconfig.json

{
  "compilerOptions": {
    ...
    "types": [
-      "webpack-env"
+      "webpack-env",
+      "vuetify"
    ],
    ...
  },
  ...
}

运行应用:

yarn serve

浏览器打开 http://localhost:8080/

[}TVSYP5B9H9FG598(V0XYM.png


编辑 tsconfig.json 是为了修正如下错误

ERROR in /Users/John/Codes/ikuokuo/start-electron/my-app/src/plugins/vuetify.ts(2,21):
2:21 Could not find a declaration file for module 'vuetify/lib'. '/Users/John/Codes/ikuokuo/start-electron/my-app/node_modules/vuetify/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/vuetify` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuetify/lib';`
    1 | import Vue from "vue";
  > 2 | import Vuetify from "vuetify/lib";
      |                     ^
    3 |
    4 | Vue.use(Vuetify);
    5 |

添加 Electron 构建

如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 负责将 Web 构建成原生桌面应用。

而将 Vue.js 应用构建成 Electron 应用,现在用 Vue CLI Plugin Electron Builder 即可。

首先,指明下 node 版本:

yarn  add @types/node@12 --dev

之后,添加 Electron Builder :

cd my-app
vue add electron-builder

Electron 版本选择 9.0.0

? Choose Electron Version ^9.0.0

添加完成后,编辑下 src/router/index.ts

...
const router = new VueRouter({
-  mode: "history",
+  mode: process.env.IS_ELECTRON ? "hash" : "history",
  base: process.env.BASE_URL,
  routes
});
export default router;

运行应用:

yarn electron:serve

现在是桌面窗口了:

7$2~JG{TBTKO}Y]%NAVP_13.png

命令定义在了 package.json

{
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  ...
}

yarn 执行即可,如下:

$ yarn lint
yarn run v1.22.4
$ vue-cli-service lint
 DONE  No lint errors found!
✨  Done in 3.17s.

yarn add @types/node@12 --dev 是为了修正如下错误

ERROR in /Users/John/Codes/ikuokuo/start-electron/my-app/node_modules/electron/electron.d.ts(1659,31):
1659:31 Cannot extend an interface 'NodeJS.EventEmitter'. Did you mean 'implements'?
...

编辑 src/router/index.ts 是为了修正如下警告

WARN  It is detected that you are using Vue Router. If you are using history mode, you must push the default route when the root component is loaded. Learn more at https://goo.gl/GM1xZG .


发布 Electron 应用

Vue 应用了 Electron Builder 插件,所以直接用此工具即可。

GitHub: https://github.com/electron-userland/electron-builder

yarn electron:build 编译发布:

# 淘宝镜像,国内下载 Electron 更快
export ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"
# macOS 下禁用签名。若要签名,见最后参考
export CSC_IDENTITY_AUTO_DISCOVERY=false
cd my-app
yarn electron:build

dist_electron/ 下即是发布内容。

例如 macOS 可见打包好的 dmg

)M`X8@D@}_E29A$2HS%YED8.png

双击 dmg 试用或安装:

7LELG%7L3D_)%B`@NU%HWV7.png

若要修改发布格式或内容,见 Electron Builder 文档: https://www.electron.build/

export CSC_IDENTITY_AUTO_DISCOVERY=false 是为了避免如下错误

...
  • signing         file=dist_electron/mac/my-app.app identityName=gdb_codesign identityHash=BC899AF362F80B3FDB39F966A1601E2AFAFA100B provisioningProfile=none
(node:10223) UnhandledPromiseRejectionWarning: Error: Command failed: codesign --sign BC899AF362F80B3FDB39F966A1601E2AFAFA100B --force --timestamp --options runtime --entitlements /Users/John/Workspace/Codes/start-electron/my-app/node_modules/app-builder-lib/templates/entitlements.mac.plist /Users/John/Workspace/Codes/start-electron/my-app/dist_electron/mac/my-app.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Helpers/chrome_crashpad_handler
error: The specified item could not be found in the keychain.
...
(node:10223) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:10223) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections tha




目录
相关文章
|
13天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
30 1
vue学习第四章
|
13天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
26 1
vue学习第九章(v-model)
|
13天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
29 1
vue学习第十章(组件开发)
|
21天前
|
安全 前端开发 Windows
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
本文介绍了 Electron 应用在 Windows 中的更新原理,重点分析了 `NsisUpdater` 类的实现。该类利用 NSIS 脚本,通过初始化、检查更新、下载更新、验证签名和安装更新等步骤,确保应用的更新过程安全可靠。核心功能包括差异下载、签名验证和管理员权限处理,确保更新高效且安全。
27 4
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
|
19天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
19天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
19天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
19天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
18天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
26 3
|
20天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。