安装electron-vue之踩坑

来源:博客园 分类: 文章浏览史 发布时间:2021-09-09 11:31:47 最后更新:2021-09-09 浏览:159
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-09-09 11:31:47

前言

我想搞一个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构建桌面应用

php技术微信