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
image
由 Hexo 驱动 & 主题 Keep
本站由 提供部署服务
总字数 42.3k 访客数 访问量