安装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构建桌面应用