最近老师突然给了一个小项目，让写一个照片墙，可以编译成.exe安装到电脑里面，因为我对C#这种桌面端语言完全不懂，也不感兴趣。并且之前听说过electron，所以就借着这个机会尝试一下，学习一下。
效果如下所示：

photo-wall
主要是可以上传图片，删除图片，新建文件夹，删除文件夹，以及图片的拖拽放大等效果。项目地址：https://github.com/FFGF/photo-wall

遇到的坑

一直基本上使用的淘宝镜像cnpm，结果报了一个奇怪的bug，无法进行cnpm run build，网上查阅之后，修改成了npm install, npm run build。就OK了，原因不清楚。

里面的拖拽使用了插件vue-grid-layout,安装的最新版，结果一直报错，开发photo-wall用的vue-electron框架，这个框架很久没更新了，还是用vuecli2构建的，而我用的拖拽插件vue-grid-layout已经使用vuecli3重新构建过了，可能是不匹配，导致bug了，后来把vue-grid-layout版本降低了，才没有了bug。如果再使用vue和electron开发，推荐使用vue-cli-plugin-electron-builder，这个使用vuecli3构建的，我下面写了一个YouTube教程的网址。

还遇到一个奇怪的问题，就是图片会自动旋转，后来查阅资料才知道，iPhone竖着拍摄的照片会有这种问题。因为就一张照片，使用windows自带的画图另存为一下就行了。如果这种图片很多，或者图片未知的建议编写代码完善。iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案

学习过程

主要是网上找的一些教程资源和开源项目进行参考。列举一下我学习过程中查找的比较好的资料。

1. 官方文档，大部分的API都在这，还是中文的。https://electronjs.org/
2. PicGo开源图床，文档写的很好 https://molunerfinn.com/electron-vue-1/
3. 老外写的，很详细的一个小例子 https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658
4. 一些比较酷的electron项目https://github.com/sindresorhus/awesome-electron
5. YouTube上面一个一小时的electron入门视频 https://www.youtube.com/watch?v=2RxHQoiDctI&t=18s
6. 老外用vue写的一个markdown，很详细。 https://blog.sourcerer.io/creating-a-markdown-editor-previewer-in-electron-and-vue-js-32a084e7b8fe

以上这些基本上都比较老，我比较喜欢vue，所以推荐最新的vuecli3构建的electron项目，视频为https://www.youtube.com/watch?v=Fl7---SEORQ。这个开源的插件地址为https://github.com/nklayman/vue-cli-plugin-electron-builder
,github介绍显示这个插件作者才16岁。。。