Vue + Electron 搭建跨端桌面应用
![](/images/Xayah.jpg)
一、前言
跨端应用开发一直都是热门需求,目前已经有很多方案可以实现跨端开发,然而 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](/2022/07/02/Vue-Electron-%E6%90%AD%E5%BB%BA%E8%B7%A8%E7%AB%AF%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8/%E8%B0%83%E8%AF%95.png)