Vue + Electron 搭建跨端桌面应用
Xayah Lv3

一、前言

跨端应用开发一直都是热门需求,目前已经有很多方案可以实现跨端开发,然而 Flutter 对于目前热门的高刷屏适配摆烂JetPack Compose 仍在发育之中, Electron 优势在于前端技术栈却亦受限于此,但如果我们熟悉前端开发Electron仍是一个不错的选择。

本文以 Vue2 热门框架 Quasar 为例,记录其Windows桌面程序搭建流程

二、流程

1. 安装NodeJS

NVM 对于Node版本管理非常方便,请参考其安装文档安装 NodeJS

2. 安装Yarn

相比于NPM,我更青睐 Yarn
安装

1
npm install --global yarn

验证

1
yarn --version

3. 安装Quasar CLI

Quasar脚手架可以方便地为我们创建Quasar工程

1
yarn global add @quasar/cli

4. 创建工程

1
yarn create quasar

根据提示选择相关配置创建Quasar工程

5. 设置Yarn Electron淘宝源

1
yarn config set electron_mirror https://cdn.npm.taobao.org/dist/electron/

5. 添加Quasar Electron模式

先进入工程目录,再添加Electron模式

1
quasar mode add electron

6. 调试

1
quasar dev -m electron
  • 本文标题:Vue + Electron 搭建跨端桌面应用
  • 本文作者:Xayah
  • 创建时间:2022-07-02 17:34:37
  • 本文链接:http://acmezone.top/2022/07/02/Vue-Electron-搭建跨端桌面应用/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!