用electron加Vuejs開發桌面程序

來自專欄雕蟲小技

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

推薦閱讀：