用electron加Vuejs開發桌面程式

摘要： electron是一個js的桌面程式框架，有很多程式基於它開發，比如VsCode,Atom等。而Vue.js是我們國人開發的著名js框架。用這兩個結合開發就是強強聯手，只要會網頁開發就能寫桌面程式，感覺不要太好 首先我們需要先安裝nodejs+npm, 因為太慢，就需要用國內的映象伺服器了...

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開發經驗開發你的桌面程式了！！！