参考文献
因最近项目要求，构建一个桌面端应用程序，类似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应用程序构建成功
