使用electron-vue環境搭建

官方說明文檔：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

項目：https://github.com/SimulatedGREG/electron-vue

Step1.安裝node.js和yarn

npm install -g yarn

Step2.安裝本地依賴模塊

npm install -g node-gyp

npm install --global --production windows-build-tools（需要admin權限，cmd命令需要run as admin。同時安裝時間較久。）

PS.admin權限運行cmd的一個方法：搜索cmd，右鍵，以管理員身份運行

 分別出現兩個成功，表示依賴已安裝成功。

Step3.准備運行

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

前兩句執行完，環境安裝完成后，在項目的根目錄下執行：yarn，就會開始安裝所需要的依賴。

中途遇到報錯：

是因為chromedriver的部分文件被國內網絡給牆掉了，無法下載完整的chromedirver包，

解決辦法：npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

運行開發環境命令：yarn run dev

運行后出現以下界面說明運行成功：

 

 

PS.遇到的其他報錯：

1. Electron failed to install correctly, please delete node_modules/electron and try installing again

處理：刪除node_modules/electron后，執行命令：npm install --save-dev electron重新安裝electron

 2.Error: listen EADDRINUSE: address already in use :::9080

處理：①cmd下，執行netstat -ano查看所有活動連接，找到被占用端口號對應的PID

　　　②執行命令：tasklist|findstr PID，即可查看是哪個進程占用了該端口

　　　③有需要的話，手動結束占用端口的程序，或者在cmd下使用taskkill命令，語法說明如下