如何VUE寫桌面應用（electron）

原文位址：https://baijiahao.baidu.com/s?id=1612232408546551686&wfr=spider&for=pc

electron是一個js的桌面程式架構，有很多程式基于它開發，比如VsCode,Atom等。而Vue.js是我們國人開發的著名js架構。用這兩個結合開發就是強強聯手，隻要會網頁開發就能寫桌面程式，感覺不要太好

首先我們需要先安裝nodejs+npm, 因為太慢，就需要用國内的鏡像伺服器了，比如阿裡的

然後執行以下指令建一個基于vue的electron項目，項目名要替換成你的目錄

最後就會看到一個程式啟動

打開項目目錄，核心的三個檔案都在src子目錄中，index.html, index.js, test.vue. 現在隻是一個簡單的hello world。 然後桌面程式最重要的是能通路本地電腦檔案。現在我們加一些代碼通路剪貼闆和D盤根目錄。剪貼闆需要electron的API, 而本地檔案則需要Nodejs的fs子產品

然後修改下Vue模闆，跟平常的Vue都是一緻的，增加一個files數組去儲存檔案名

最後顯示的效果如下

右邊就是Chrome的控制台，可以用ctrl+shift+i 開啟，這樣有什麼錯誤的話，直接可以調試了。

左邊如果加上檔案夾圖示，就是一個标準的檔案管理器了。現在你可以用你的Web開發經驗開發你的桌面程式了！！！