electron c#桌面开发_使用 Electron + Vue 开发 MacOS APP

如果你想研发一款 MAC APP or Windows APP，并且你也是一个前端工程师的话，那么这篇文章将很适合你——它将介绍一款工具，用于使用 Vue 开发 Electron 项目——它们最终可以编译为跨平台的桌面端 APP。

一、著名的 Electron

如果你是一个程序员，不管是前端程序员，还是 Python 程序员。

你都一定使用过这两种工具：VSCode 和 Github Desktop。

你们是否想过，这些好用的生产力工具到底是用什么语言编写的吗？

真的就是 Swift UI 一点一点搭建出来的吗？

真就是 C# 窗体程序一点一点扣出来的吗？

很明显，它们不是。

——它们都是由 Github 公司出品的 Electron 跨端开发框架编写出来的

Electron 是一款可以帮助我们使用 HTML + CSS + JavaScript 进行桌面开发的工具。

使用它们开发的软件，最后都是跑在 Chrome 的内核上面的。

如果不信的话，你可以找到 Chrome 的开发者工具快捷键，到你的 VSCode 或者 Github Desktop 上面按一下，你会发现这样一个现象：

在 github desktop 上面调出 Chrome 开发者工具

二、现代 WEB 开发，离不开 MVVM 框架

没错，当我们可以使用使用 HTML + CSS + JavaScript 的时候，就意味着我们可以使用 WEB 开发中我们拥有的一切，来用在我们的桌面开发上。

而在这些令人激动的框架中，最为关键的，恐怕就是 MVVM 框架了：

• Vue
• React
• Angular

没错，就是它们三兄弟。

我们本文中，就选取 VUE 作为我们的 MVVM 框架，我们将把 Vue 的开发体验带到 Electron 开发中去。

或者说，我们将在 Vue 中，使用 Electron。

三、一款基于 VUE-CLI 3.0 + 的 Electron 插件式开发工具

可能很多人以为我要说的是 electron-vue，一个专门为了使用 Vue 进行 Electron 开发的手脚架工具，但是并不是。

electron-vue 好虽好，但是已经过时了。

它依旧使用的是 vue-cli 2.0 版本，可是当前 vue-cli 已经到 4.0 版本了。

所以我们今天介绍的这个框架，就是基于 vue 3.0+ 版本的（兼容最新 4.0+ 版本），它的名字是：Vue CLI Plugin Electron Builder

我们先来看看它是如何使用的吧。

3.1 安装 Vue-Cli

npm install -g @vue/cli

没错，很可能你认为，我在赘述你已经有的东西——但是我们这篇文章也希望对新手友好，所以见谅啦。

如果实在没事干的话，也可以看看自己的 vue-cli 版本是不是最新版本了：（2019.11.12）

vue --version
//@vue/cli 4.0.5

3.2 使用 Vue-Cli 创建新项目

vue create app

3.3 在新项目的根目录下，创建 Electron 项目

cd app
vue add electron-builder

3.4 运行 Electron 项目

npm run electron:serve

electron app works