vue-electron腳手架安裝及說明 打包基於Vue的 桌面應用程序

今天這篇文章是講述一下 融合了vue-cli+electron的一種新的腳手架，省去許多繁瑣配置，即vue-electron。

下面就說一下安裝和使用，假設你的電腦已經安裝node.js,而且已經全局搭建好vue-cli腳手架，若是沒有的話，打開終端：$npm install --global vue-cli 全局安裝。

1.新建文件夾，cd 到你將要安裝的文件夾目錄，$vue init simulatedgreg/electron-vue

這一步驟極其類似於當初安裝vue-cli腳手架時，一個一個步驟來，截幾張圖

 

相似於這樣 選擇 enter yes 或者 no 看本身的選擇

注意這一步呢，我選擇了electron-packager 項。到這裏你就能夠看到，原本的空文件夾裏如今新建了vue-electron基礎文件

2.$npm install  這一步主要是安裝依賴，耗時有點久。完畢後項目內多了node_modules 文件夾，裏面東西較多。如圖：

 

 3.$npm run dev  會出現的界面如圖：右下角是一塊兒出來的控制檯

 

 哈哈，完美呈現出來桌面應用。

 

4.打包。先看看項目package.json文件截圖

scripts內各類打包命令，其中就包括Mac、Windows、Linux三大平臺。例如我想在Mac上打包運行，$npm run build:darwin  就會在項目的build文件夾下生成一個應用程序，以此類推，，，$npm run build:win32 等

vue-electron腳手架最大好處就是咱們不要在Vue項目裏手動配置electron了，極好的融合了Vue-cli+electron ,省去開發者大把時間去配置。

另外不得不說一下，vue-electron主要業務邏輯都放在了src->renderer文件夾內去寫，和以前的vue-cli搭建項目能夠說是沒有任何區別，很贊是吧！