spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

迷南。 2022-05-17 07:22 165阅读 0赞

***前言***

--------------------

*　　Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。*

*Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来。这两个项目在2014春季开源。*

*目前它已成为开源开发者、初创企业和老牌公司常用的开发工具。 看看谁在使用Electron 。*

*继续往下阅读可以了解Electron的贡献者们和已经发布的版本，或者直接阅读快速开始指引来开始用Electron来构建应用。*

*(摘抄至electronjs.org)*

**一、初始化项目**

--------------------

运行，vue init simulatedgreg/electron-vue 项目名称

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>vue init simulatedgreg</code><code>/electron-vue</code>&nbsp;<code>admin</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这里的项目名称是“admin”

如果没有安装vue脚手架，请查看《[spring boot + vue + element-ui全栈开发入门——windows开发环境][spring boot _ vue _ element-ui_windows]》

![78241-20180308114720841-152060539.png][]

一路回车

然后运行npm install来安装依赖，运行方式和之前一样。

如果遇到run dev或者run build的时候出错，可能是因为国内的网络下载“electron-v1.8.3-win32-x64.zip”出错，这时，你需要设置npm的代理：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>npm config&nbsp;</code><code>set</code>&nbsp;<code>proxy http:</code><code>//</code><code>服务器IP或域名:端口号</code></p> <p><code>npm config&nbsp;</code><code>set</code>&nbsp;<code>https-proxy http:</code><code>//</code><code>服务器IP或域名:端口号</code></p> </td> 
  </tr> 
 </tbody> 
</table>

如果需要用户名密码：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm config&nbsp;</code><code>set</code>&nbsp;<code>proxy http:</code><code>//</code><code>用户名:密码@服务器IP或域名:端口号</code></p> </td> 
  </tr> 
 </tbody> 
</table>

npm config set https-proxy http://用户名:密码@服务器IP或域名:端口号

设置回原库

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm config&nbsp;</code><code>set</code>&nbsp;<code>registry http:</code><code>//registry</code><code>.npmjs.org</code></p> </td> 
  </tr> 
 </tbody> 
</table>

也可以使用yarn。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm&nbsp;</code><code>install</code>&nbsp;<code>-g yarn</code></p> </td> 
  </tr> 
 </tbody> 
</table>

安装依赖、开发模式运行和编程的命令分别是：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>yarn&nbsp;</code><code>install</code></p> <p><code>yarn run dev</code></p> <p><code>yarn run build</code></p> </td> 
  </tr> 
 </tbody> 
</table>

项目构建完毕后，结构如下图所示：

![78241-20180308161341131-384167192.png][]

和之前项目区别是，main是用于桌面程序的代码，render是用于渲染的代码。我们只需要在render文件夹里写代码就可以。

开发模式运行：

![78241-20180308153913852-1926684645.png][]

**二、代码编写**

--------------------

参照《[spring boot + vue + element-ui全栈开发入门——集成element-ui][spring boot _ vue _ element-ui_element-ui]》安装所需的依赖

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>cnpm&nbsp;</code><code>install</code>&nbsp;<code>--save element-ui</code></p> <p><code>cnpm&nbsp;</code><code>install</code>&nbsp;<code>--save-dev node-sass</code></p> <p><code>cnpm&nbsp;</code><code>install</code>&nbsp;<code>--save-dev sass-loader&lt;br&gt;cnpm&nbsp;</code><code>install</code>&nbsp;<code>--save font-awesome</code></p> </td> 
  </tr> 
 </tbody> 
</table>

参照《[spring boot + vue + element-ui全栈开发入门——前端列表页面开发][spring boot _ vue _ element-ui]》的代码如下：

入口文件：

![ContractedBlock.gif][] main.js

其中 axios.defaults.baseURL = 'http://localhost:18080' 是设置后端项目URL，而这可以根据具体情况写到配置文件中，开发环境调用开发环境的配置，生产环境调用生产环境配置。

路由文件：

![ContractedBlock.gif][] router/index.js

主页面：

![ContractedBlock.gif][] Main.vue

会员数据列表页面：

![ContractedBlock.gif][] Member.vue

结构如下图所示：

![78241-20180308164349966-1876771700.png][]

还有，在运行之前，我们需求修改src/main/index.js的配置：

![复制代码][copycode.gif]

function createWindow() {
      /**
       * Initial window options
       */
      mainWindow = new BrowserWindow({
        height: 563,
        useContentSize: true,
        width: 1000,
        webPreferences: {
          webSecurity: false
        }
      })

![复制代码][copycode.gif]

其目的是为了实现js跨域。

运行之前项目的后端项目《[spring boot + vue + element-ui全栈开发入门——spring boot后端开发][spring boot _ vue _ element-ui_spring boot]》：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>mvn package</code></p> <p><code>java -jar target</code><code>/demo</code><code>.jar</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![78241-20180308165133160-1138431572.png][]

运行项目，效果如下：

![78241-20180308164746875-1347434943.png][]

**二、生成安装包**

--------------------

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm run build</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![78241-20180308183607750-647854312.png][]

如提示缺少vue组建，是因为registry的问题，因为国内taobao镜像没有Electron的依赖环境。所以需要设置回默认的 registry，并使用设置proxy的方式下载依赖环境。

如果提示“icon source "build/icons/icon.ico" not found”

就把“icons”加到build目录下，下载icons请点击[链接][Link 1]，根据具体情况修改icons。

![78241-20180308182752237-1095813158.png][]

生成好后，出现“admin Setup 0.0.0.exe”的文件，即安装程序。

我运用这个安装程序后，打开刚刚开发好的程序，效果如图所示：

![78241-20180308182725646-1403354437.png][]

![78241-20180308182800230-665838115.png][]![78241-20180308182835102-187692388.png][]

发现，虽然只用到了一些前端技术，但已经能够开发出桌面应用了。小时候，老师说：“学好数理化，走遍天下都不怕”。而现在是：“学会了node，任何平台的前端都不怕”。

[返回目录][Link 2]

代码下载地址 : https://github.com/carter659/electron-vue-example.git

![78241-20170102202708534-2101524696.png][]

[spring boot _ vue _ element-ui_windows]: http://www.cnblogs.com/GoodHelper/p/8430543.html
[78241-20180308114720841-152060539.png]: /images/20220517/ca9aa03393c54be1a6f4f2b3037aaf19.png
[78241-20180308161341131-384167192.png]: /images/20220517/b61e813dd912480bb0039efadd2a7b04.png
[78241-20180308153913852-1926684645.png]: /images/20220517/0fb78884d2c944c08dfa2cbabde51b50.png
[spring boot _ vue _ element-ui_element-ui]: http://www.cnblogs.com/GoodHelper/p/8430861.html
[spring boot _ vue _ element-ui]: http://www.cnblogs.com/GoodHelper/p/8431835.html
[ContractedBlock.gif]: /images/20220517/50c806f04e064b388c64e8bac033085e.png
[78241-20180308164349966-1876771700.png]: /images/20220517/32d90dc987c54bb68a0d216554f7a931.png
[copycode.gif]: /images/20220517/999b784dc1674421ae95781ddcaf4f22.png
[spring boot _ vue _ element-ui_spring boot]: http://www.cnblogs.com/GoodHelper/p/8434540.html
[78241-20180308165133160-1138431572.png]: /images/20220517/d4070c3ca95d4c4c80660ebf6538a9c8.png
[78241-20180308164746875-1347434943.png]: /images/20220517/703e389226b04228ba2db38e609568d4.png
[78241-20180308183607750-647854312.png]: /images/20220517/b52111a15dd34105a1327cedf1ecd986.png
[Link 1]: https://files.cnblogs.com/files/GoodHelper/icons.rar
[78241-20180308182752237-1095813158.png]: /images/20220517/1c46498d595a40bba46355c879b0322b.png
[78241-20180308182725646-1403354437.png]: /images/20220517/f3872f69d4f648e1ab2a3418be1530c1.png
[78241-20180308182800230-665838115.png]: https://images2018.cnblogs.com/blog/78241/201803/78241-20180308182800230-665838115.png
[78241-20180308182835102-187692388.png]: /images/20220517/2c546ec85a9043ef8eb4fd31d4b4f742.png
[Link 2]: http://www.cnblogs.com/GoodHelper/p/8430422.html
[78241-20170102202708534-2101524696.png]: /images/20220517/3d7e17129359467cb766872aef40981d.png