Vue + Electron 搭建跨端桌面应用
一、前言
跨端应用开发一直都是热门需求,目前已经有很多方案可以实现跨端开发,然而 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 |