electron + vue构建桌面应用程序（1）——创建项目HelloWorld

参考文献

electron-vue跨平台桌面应用开发实战教程

因最近项目要求，构建一个桌面端应用程序，类似C/S端，结合Electron可以实现基于B/S端的桌面应用程序，现记录下入坑过程

1.利用vue-cli创建vue项目

• 查看vue-cli版本 vue -V
  
  vue-cli版本.png
• 创建项目vue create 项目名

此处我选择手动自定义创建项目+vue3.x，操作完耐心等待即可。

vue-cli创建项目.png

• 运行npm run serve

helloworld页面.png

2. 使用electron-builder集成electron

vue add electron-builder

安装electron-builder，我这里选择最新版本12.0.0，耐心等待安装

electron-builder添加.png

安装完成后会在src目录下生成background.js，并在package.json文件中修main为"main": “background.js”

3.运行程序npm run electron:serve

启动时，会启动很久，并出现下列信息

vue-devtools安装失败.png

这是安装Vue Devtools失败，该问题解决方法：将vue-devtools下载到本地，在代码中设置本地地址即可，这主要方便开发过程中调试

• 首先注释掉background.js中在线下载vue-devtools代码
  

  注释掉在线下载vue-devtools.png

• 加载本地vue-devtools

//加载本地vue-devtools
  function addLocalDevTools(win) {
    const ses = win.webContents.session;
    ses.loadExtension("E:/tools/vuejs_devtools_beta-6.0.0.7-an+fx");
  }

• 开发环境下调用

  
  
  加载本地vue-devtools.png

4.桌面程序显示

electron-vue桌面程序界面.png

至此，基于electron+vue的桌面helloworld应用程序构建成功