手動搭建vue-electron框架

我在往期文章《在vue項目中引入element-ui》中介紹瞭如何徹底不使用腳手架的方式，手動建立一個vue-element-ui框架，這篇文章我將基於該vue-element-ui框架，引入electron，使其由一個web項目成爲一個客戶端項目

步驟

• 引入electron-builder，執行完命令以後，文件結構會有些改變，具體是修改了package.json以及增長了background.js文件

vue add electron-builder

• 修改router.js文件，將helloworld的頁面的路徑設置爲根路徑。以便electron啓動的時候就能看到效果，修改以後，routers變量的值以下

var routes = [
    {
        path: '/',
        component: HW
    }
]

• 運行一下命令，啓動electron項目，能夠看到效果

npm run electron:serve

經過以上方式就成功把electron-vue-element-ui結合在一塊兒了。大多數狀況下，因爲網絡緣由，可能沒法下載成功下載electron，具體的解決方案能夠查看個人往期文章《解決npm網絡下載問題》
，若是還不行，或者繼續往下看

解決electron下載慢的問題

• 經過下面的網站去找到你想要的electron文件

https://npm.taobao.org/mirrors/electron/

• 把下載後的文件，放到如下文件夾下

%USERPROFILE%\AppData\Local\electron\Cache

End！

原文《手動搭建vue-electron框架》