緣起

以前看過一篇帖子，很多寫作愛好者討論寫作時用什么markdown編輯器好，可惜當時我連markdown是何物都不知道，事后百度才明白是一種新的寫作方式，語法很是簡單，操作很是方便，讓我這個只知道用word的有些汗顏，于是決定研究一番！

思路

當時看見的帖子有一個討論點在于用markdown軟件寫作，圖片是存在本地的，文章寫好之后把文章復制粘貼到博客平臺的話圖片就失效了。當然也可以直接在簡書或者思否這樣的平臺寫好后再復制過去，但這些平臺都對上傳的圖片做了一定的限制，比如圖片必須小于5M。當時的解決辦法是一部分直接在簡書上寫一篇不發(fā)表的文章專門用來存圖片地址，也有人申請七牛云來專門存放圖片然后復制圖片地址來用！

目的

現在想寫這樣一個markdown編輯器主要就是為了解決上述問題
1、將插入到文章的圖片都上傳到七牛云空間，并獲取返回地址。這樣寫文章的作者可以隨時在七牛云查看自己存在的七牛云空間的圖片，并且文章中的圖片地址也是永久的網絡地址，不用擔心復制到其它平臺會失效！
2、作者寫的文章都保存在本地，方便寫作者隨時查閱修改！

編寫

使用electron-vue創(chuàng)建項目

按官方的說法：
使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用

electron官網

vue init simulatedgreg/electron-vue md-editorcd md-editoryarn install

項目結構

運行項目

yarn run dev

然后會自動彈出一個軟件窗口

然后就可以愉快的按寫vue項目一樣開些寫程序了！

打包

強力推薦使用yarn，用npm打包一直卡在下載打包的必須文件上

可打包為win/mac/liunx三個平臺下的桌面應用 yarn run build

打包之后在md-editorbuild文件夾下會有打包完成的項目

然后運行

md-editor.exe就可以打開這個桌面程序了

github地址

總結

以上是生活随笔為你收集整理的vue-electron 写一个markdown文章编辑器(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。