1、快速创建一个electron-vue工程

一点闲话

有一段时间没更新文章了，因为最近没在折腾nodemcu，没啥好水文章了。画的esp8266的板子又因为没保存软件未响应没了，也没啥动力画。刚好最近2~3个月断断续续在折腾electron。而网上关于electron的文章还是比较少的。想着可以以此作为契机，写个系列文章来记录electron的折腾过程。

这个系列的目标是做出一个类似于ESPlorer的开发工具。

Paste_Image.png

暂定使用到下面的内容：

• electron
• vue
• element
• codemirror
• codemirror
• node-serialport

当然，因为本职不是前端，所以本系列更新可能会很慢（尽量实现这个开发工具，把这个系列写完）。

创建一个工程

本文写介绍如何创建一个electron的工程，这里使用个electron-vue的脚手架——Electron Vue 。这个是能找到的带文档的工具了。

使用这个工具需要用到vue-cli，全局安装即可使用。

npm install -g vue-cli                            //全局安装
vue init simulatedgreg/electron-vue my-project    //创建工程

my-project是要创建的工程名称，按需修改，比如改成 nodemcutool。然后根据向导执行就可以创建一个工程了。最后工程是这样子的

向导

这里作死的开启了eslint来规范代码。另外，application name 不能有大写字母。创建好工程后，使用cd nodemcutool切换到工程目录。再使用npm install安装各种依赖。安装过程可能会很漫长且出现中断，建议使用nrm修改npm镜像代理。中断的话，多试几次！

多数情况中断发送在这里node ./download-chromedriver.js

此外，在执行npm run dev的时候也会报错，说electron没有安装成功。如果有报这个错误的话，也重新执行一下npm install electron@版本号

---

如果你安装了cnpm，推荐你使用cnpm install来代替npm install。

---

初探工程

简单的看一下工程的目录结构

目录结构

首先，是工程根目录下面的package.json文件，这个是工程的依赖，根据向导中选择的组件生成的。其中的electron比较老，可以手动修改一下版本号，再执行 npm install

其次，是app\src文件夹。里面也有一个package.json文件，这里是开发应用的依赖，具体的后面在细讲。src文件夹下面还有两个文件夹——main和renderer。

main文件夹主要是存储electron的主线程的相关文件。

renderer文件夹则是存储和页面有关的文件。

后面我们主要的工作都在这两个文件夹里面。到时候在慢慢讲。

庐山真面目

如果顺利的话，执行npm run dev后你就会看到electron的真面目了。

当当当当

看起来很简单。不过，这里面的内容可不少。这个简单的页面涉及到了5个vue单文件组件。看似简单，实际上没那么简单。

不简单

如何创建一个工程就先说到这里，后面的系列文章在讲如何整合elementUI和其他东西。

再次说明一下，因为我不是搞前端的，所以很多东西并不懂。可能有些地方表达的不是很准确（求轻拍）。不过，重点还是想说明怎么用。当然，也希望这个系列的文章对你帮助