【小结】实战：使用electron-vue + yarn/npm 创建桌面应用程序

electron简介：

官网：https://www.electronjs.org/
更多内容：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

项目创建和普通的vue项目一样，使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue your-project


但这个库很久没更新了，创建出来的electron版本是2.0.18
如果后续有开机自启动等需求，建议升级到4+版本
我还看到个electron-forge，先存一下，后续看

创建时，会添加打包方式，有两种
一是electron-builder，二是electron-packager

两者的差别：
electron-packager打包出来的是一个直接可运行的程序，打包来的包要大些
electron-builder打包出来的是一个安装程序

builder功能更强大, 可以直接在package.json的electron-builder配置中，添加nsis配置来在程序安装时写入配合到注册表，来实现程序安装/卸载等设置。超赞！
更多内容：https://www.electron.build/configuration/nsis
后续更新：
如果用electron-builder打包并使用了nsis，在linux环境安装后，每次点击运行都会出现一个execute提示框

但builder疑似无法打linux包

打包时访问的这个网站的服务器疑似挂了，在git上搜到了很多人遇到了相同的问题，暂时无解，找到办法后再更新

后续更新：
这个问题是因为electron不支持跨平台打包，在linux环境打包就没有遇到这个问题，详情参考
electron项目在linux环境下运行和打包遇到的错误处理（打包使用electron-builder）

一路回车，项目就建好了
建好的项目结构：

管理依赖请使用 yarn
来一开始我用的是npm，结果到打包的时候一直失败。百度了一下很多人都遇到了同样的问题。
（补充：后来建项目测试linux环境打包时，发现用npm也是没问题的）
6.30补充：依赖管理建议改回 npm

yarn的安装：
方法1
官网连接：https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable

下载安装即可，环境变量会自动添加

方法2
npm install yarn -g

安装完成后，记得设置淘宝镜像（有梯子最好）
yarn config set registry https://registry.npm.taobao.org/

在项目里执行命令时，我遇到了这样的报错 yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。 + yarn install

解决方法：
Emmm还是得使用管理员身份打开cmd
npm install -g yarn

然后项目里执行依然报错：
yarn : 无法加载文件 C:\Program Files\nodejs\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micros
oft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies

解决方法：
依然使用管理员身份打开cmd
执行set-ExecutionPolicy RemoteSigned

yarn可以使用后，输入命令yarn或yarn install安装项目需要的依赖

安装完成后，使用命令yarn run dev就可以运行了

初次运行时可能会遇到这样的报错

解决方法：https://github.com/SimulatedGREG/electron-vue/issues/871
在.electron-vue下的webpack.renderer.config.js和webpack.web.config.js中添加

templateParameters(compilation, assets, options) {
    
    
    return {
    
    
      compilation: compilation,
      webpack: compilation.getStats().toJson(),
      webpackConfig: compilation.options,
      htmlWebpackPlugin: {
    
    
        files: assets,
        options: options
      },
      process,
    };
  },

再次运行可以看到实例了



打包：
打包命令yarn run build
但我后面还是改回了用npm
附上比较全面的electron打包踩坑总结：https://segmentfault.com/a/1190000018533945?utm_source=tag-newest
打包结果

在开发过程中遇到不少问题
->Vue+Electron下vuex的commit/dispatch没有效果：
https://blog.csdn.net/weixin_30532759/article/details/94877480

以上就是使用electron+vue创建了一个基础的桌面程序