electron-vue搭建流程

electron能开发桌面应用，与Vue很好结合

npm install --global @vue/cli
vue create

electronjs的官方地址
https://www.electronjs.org/
electron-vue的官方文档地址
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/?q=
创建项目
vue init simulatedgreg/electron-vue my-project

进入项目目录
cd my-project
安装依赖
npm install

通过package.json查看构建项目和运行命令

运行项目
npm run dev

解决以上报红问题

下载vue-devtools插件网络问题，不影响

项目结构

开始使用，下载蚂蚁金服UI框架依赖
蚂蚁金服UI地址：https://www.antdv.com/docs/vue/getting-started-cn/
npm i --save ant-design-vue

在渲染线程全局main.js中导入使用

使用ant-design导航栏

运行查看
npm run dev

打包（打包为桌面应用）
npm run build

解决上述打包遇到问题，找到项目根目录.electron-vue/build.js修改下面代码，修改其中一对的tasks变量名（与后面一对进行区分即可，自定义修改），需要注意的是本文件中一共包含四个tasks，前两个是一对，后两个是一对，修改时请对应修改。

重新编译打包
npm run build

分析上述报错问题，在.electron-vue\build.js 引入multispinner（安装multispinner模块），原因是在 .electron-vue\build.js文件中，代码中使用了 Multispinner ，但没有在开头引用，并且package.json文件中也没有这个依赖文件。
解决方法：先安装 Multispinner依赖 ，再在文件中引用。
npm i multispinner --save
const Multispinner = require(‘multispinner’)

重新打包
npm run build

上述打包等了很久一直没有进展
重新指定淘宝镜像或者vpn，找到package.json,指定taobao下载镜像地址
“electronDownload”:{
“mirror”:“https://npm.taobao.org/mirrors/electron/”
},

打包成功

打包文件在项目的build包下，可对build下的应用.exe文件进行安装

也可以进入win-unpacked包下直接运行应用.exe，不用安装