Electron学习（一）vue项目web端生成桌面端应用程序

主要资料

官网：Electron

开发文档：Documentation | Electron

操作步骤 

首先保证你的电脑 Node.js 已正确安装，可以在终端输入以下命令查看版本：

node -v
npm -v

如果 执行结果显示： xx 不是内部命令，说明你还没有安装node  

node 安装地址：下载 | Node.js 中文网

（注 ：安装 vue-cli 脚手架需要node版本为 v4.0 以上）

1.全局安装electron

npm install electron -g

我已经安装过了，可查看版本：

2. 全局安装vue-cli  

npm install -g @vue/cli

加-g是安装到全局：

3.定位到你的vue项目

在使用electron创建桌面端项目前首先确保你的vue项目能够成功运行web端

我用的是vol.vue示例项目，前后端都已成功运行

前端初始页面如下：

使用管理员身份运行cmd命令提示符，定位到前端vue项目路径

 

4.向项目中添加electron-builder

vue add electron-builder

遇选择electron版本选默认的最高版本即可 

是否添加Spectron测试？是，选Y

成功添加 vue-cli 插件 electron-builder ：

5.使用electron:serve运行程序

npm run electron:serve

会有 Starting development server  和 Building main process 两个过程，耐心等待即可

  

显示 Launching Electron... 后代表执行成功了

然后就会弹出一个桌面窗口，除了多了菜单栏（默认的），其余内容和网页版一模一样：

可以看到在vue项目路径下多了【dist_electron 文件夹】，内有 index.js 和 package.json 两个文件

6.把vue项目打包成可执行程序

npm run electron:build

 

 首先打包成网页的形式，然后打包成可执行程序，显示 Build complete! 即打包完成： 

 打包完成之后可以在【dist_electron 文件夹】下看到【win-unpacked文件夹】：

 双击【win-unpacked文件夹】下的【.exe文件】即可启动桌面端应用程序

启动成功：

---

原创不易，转载务必注明出处。