安裝electron-vue之踩坑

前言

我想搞一個Windows桌面軟件，但是E語言無法讀取到注冊表，就只能選擇用這個。

• 什么？你問我學我unity的為什么不用C#寫。
• 答：我不會啊。
• 為什么用electron
• 答：因為我除了unity好好學之外，還有就是JS好好學了。

環境

不知道你們會選擇什么環境，我選擇的是linux(ubuntu)作為我的開發環境。
Electron由Node.js+Chromium+Native APIs構成。

Node.js

因此你需要Node.js。詳細的安裝請自行百度。
By the way, 你的安裝路徑中最好別帶有中文字符，如果不會的話，傻瓜式安裝即可。

安裝Electron

npm

我嘗試過用npm下載Electron，不過那速度很美麗。所以我選擇了淘寶國內鏡像。

cnpm

通過npm安裝cnpm...這速度當然非常美麗。
建議邊吃飯邊看電視邊看小說，然后等待。

 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 

通過cnpm安裝Electron

全局安裝electron，可能會有權限問題所以使用sudo來進行安裝。

$ sudo cnpm install -g electron

啟動Electron

通過Electron提供的快速工程打開一個簡單的electron項目

教程地址
當然你這一步驟需要git，所以你還額外需要安裝git。百度一下，自己動一下手。

# 克隆這倉庫
git clone https://github.com/electron/electron-quick-start
# 進入倉庫
cd electron-quick-start
# 安裝依賴庫
npm install
# 運行應用
npm start

如果程序正常運行的話，你會看見彈出一個electron工程窗口！

大功告成

完結！_開玩笑的
當然，你已經成功創建了一個electron項目，即使他還是那么簡陋。所以它還僅僅不夠。
以下代碼出處

安裝Electron-vue

# 如果你沒有vue-cli的話需要全局安裝
npm install -g vue-cli
# 然后使用vue-cli來安裝electron-vue的模板
vue init simulatedgreg/electron-vue my-project

# 安裝依賴
cd my-project
yarn # or npm install
# 進入開發模式
yarn run dev # or npm run dev

npm install_{(正文開始)}

安裝依賴，實際上我是在這步才安裝cnpm，因為npm的下載速度實在太美麗。

cnpm install

安裝所需的依賴。然而，我使用這步安裝完所有的依賴，但我執行cnpm run dev又出問題了。所以我不得不安裝yarn。

yarn

安裝yarn

# 我是使用aptitude來安裝，win/mac請忽視這一步
$ sudo aptitude update && sudo aptitude install yarn
# or sudo apt-get update && sudo apt-get install yarn

踩坑yarn

# 當我cd到my-project文件
$ yarn
00h00m00s 0/0: : ERROR: There are no scenarios; must have at least one.
# 卻收獲一個錯誤
# 經過搜索可能是yarn版本低的問題

# 當然，如果你沒報錯的話，請忽視這一步驟
$ sudo apt remove yarn

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

$ sudo apt update && sudo apt install yarn

# 最后在執行下yarn
$ yarn
# 但是我yarn在下載依賴的時候，報錯了
libgconf-2.so.4: cannot open shared object file: No such file or directory
# 提示缺少libgconf-2.so.4
# 此時只需要下載libgconf2-4即可
$ sudo apt-get install libgconf2-4
# 進入開發模式
$ yarn run dev

大功告成

大功告成！

---

參考文章：
一、官方環境配置教程
二、Electron-vue入門
三、cnpm淘寶鏡像
四、StackoverFLow
五、libgconf-2.so.4
六、Electron構建桌面應用