electron vue photo-wall

最近老师突然给了一个小项目,让写一个照片墙,可以编译成.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岁。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 229,327评论 6 537
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 98,996评论 3 423
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 177,316评论 0 382
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 63,406评论 1 316
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 72,128评论 6 410
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,524评论 1 324
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,576评论 3 444
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,759评论 0 289
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 49,310评论 1 335
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 41,065评论 3 356
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 43,249评论 1 371
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,821评论 5 362
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,479评论 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,909评论 0 28
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 36,140评论 1 290
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,984评论 3 395
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 48,228评论 2 375

推荐阅读更多精彩内容

  • 简说Vue (组件库) https://github.com/ElemeFE/element" 饿了么出品的VUE...
    Estrus丶阅读 1,759评论 0 1
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,166评论 0 1
  • 大约在河津,基本上都见不到流浪猫,而见到的都是狗,狗一天没完没了的缠着我们所以我们把狗称为“怪物”我们都喜欢猫...
    董培炎阅读 322评论 1 2
  • 1.堆溢出 java堆用于存放程序运行期间所产生的对象实例,因此当对象足够多的时候,就会产生堆内存溢出,异常堆栈信...
    aniegai阅读 529评论 1 0
  • 何为牛逼?就是有一两样可以拿出来炫的,让旁人一看就倒吸一口气,心里深深的叹一口气,我要是他该多好啊。 牛逼不止用来...
    伊涵crystal阅读 235评论 2 3