vue-electron 写一个markdown文章编辑器(一)

缘起

以前看过一篇帖子，很多写作爱好者讨论写作时用什么markdown编辑器好，可惜当时我连markdown是何物都不知道，事后百度才明白是一种新的写作方式，语法很是简单，操作很是方便，让我这个只知道用word的有些汗颜，于是决定研究一番！

思路

当时看见的帖子有一个讨论点在于用markdown软件写作，图片是存在本地的，文章写好之后把文章复制粘贴到博客平台的话图片就失效了。当然也可以直接在简书或者思否这样的平台写好后再复制过去，但这些平台都对上传的图片做了一定的限制，比如图片必须小于5M。当时的解决办法是一部分直接在简书上写一篇不发表的文章专门用来存图片地址，也有人申请七牛云来专门存放图片然后复制图片地址来用！

目的

现在想写这样一个markdown编辑器主要就是为了解决上述问题 1、将插入到文章的图片都上传到七牛云空间，并获取返回地址。这样写文章的作者可以随时在七牛云查看自己存在的七牛云空间的图片，并且文章中的图片地址也是永久的网络地址，不用担心复制到其它平台会失效！ 2、作者写的文章都保存在本地，方便写作者随时查阅修改！

编写

使用electron-vue创建项目

按官方的说法： 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

electron官网

vue init simulatedgreg/electron-vue md-editor

cd md-editor

yarn install

项目结构

运行项目

yarn run dev

然后会自动弹出一个软件窗口

然后就可以愉快的按写vue项目一样开些写程序了！

打包

强力推荐使用yarn，用npm打包一直卡在下载打包的必须文件上

可打包为win/mac/liunx三个平台下的桌面应用

yarn run build

打包之后在md-editor\build文件夹下会有打包完成的项目

然后运行

md-editor.exe就可以打开这个桌面程序了

github地址

转载于:https://my.oschina.net/u/3701618/blog/1795871