【electron-vue】项目搭建到集成串口工具步骤

一、electron-vue项目搭建

准备：
由于已经有electron-vue集成好的空白模板并且是开源免费的，所以需要下载开源的这个脚手架，将下载的这个开源模板存在一个文件夹中，再自己准备一个存放自己项目的项目目录的文件夹

So：
我们需要新建两个文件夹，一个用来存储准备创建脚手架，一个用来下载electron-vue脚手架模板

如果你已经下载好electron-vue或已经存在electron-vue项目了可以调过此步骤，直接阅读第二步骤：集成serialport工具

1.从git下载electron-vue脚手架模板

我们需要打开刚才新建的空的文件夹，并在黑窗口运行命令

1>安装vue-cli

npm install -g vue-cli

2>在gitBush拉取git的electron-vue开源模板
Electron-vue国内码云地址：https://gitee.com/mirrors/electron-vue
如果是gitBush工具，可以直接在文件夹内右键打开gitBush，运行命令：

git clone https://gitee.com/mirrors/electron-vue.git

2.创建项目

打开另一个新建的空文件夹，在黑窗口运行命令（init后是刚下载的electron-vue模板的路径，electron-item是项目名称）：

vue init D:\electron-vue electron-item

下图为配置项，可以根据自己的需求进行修改：

注意：
在配置项Select which Vue plugins to install选项时，必须勾选vue-electron选项

3.继续在此窗口下运行命令

1>进入创建好的脚手架目录。
注：这里electron-item是我刚刚创建时自己起的名字，需要替换成自己在刚才创建的脚手架名称

cd electron-item

2>给脚手架下载node依赖包

npm install 

3>因为在使用过程中我发现脚手架缺少依赖，导致报错，所以需要下载缺失的polyfill-object.formentries依赖，可以少走弯路

npm i polyfill-object.fromentries

4>在electron-item项目里的.electron-vue目录下找到dev-client.js文件，引入刚才下的依赖

import 'polyfill-object.fromentries';

5>因为下载的脚手架sass版本不匹配，所以需要自己进行对sass、sass-loader、node-sass 的版本更换，按顺序运行以下命令

npm uninstall sass-loader
npm uninstall node-sass
npm uninstall sass-loader
npm install sass@1.26.5 --save-dev
npm install sass-loader@7.0.0 --save-dev
npm install node-sass

6>运行npm run dev将项目启动

4.在脚手架的electron入口js文件中需要增加几行配置项（如图）

补充说明：
1>在创建BrowserWindow时新增

   webPreferences: {
      nodeIntegration: true,
      // 官网似乎说是默认false，但是这里必须设置contextIsolation
      contextIsolation: false,
      enableRemoteModule: true, //新增行
    }

2>在声明mainWindow之前新增代码行

app.allowRendererProcessReuse = false;

5.electron-vue模板的electron版本太低，需要升级到13.0.0，当前版本2.0.18

说明：可以根据自己的实际情况更换版本，当前这里作者使用的是13.0.0

运行以下命令：

1>卸载electron

npm uninstall electron

2>下载指定版本electron，@后跟的是版本号，可以根据自己需要的版本进行调整

npm install --save-dev electron@13.0.0

至此，基于13.0.0版本的electron的electron-vue项目就搭建完成了，下一步集成串口工具serialport

二、集成serialport工具

1.在根目录的黑窗口运行命令，下载最新版串口工具

npm install --save-dev serialport

2.输入命令启动项目

npm run dev

注：如果报错 Cannot find module ‘electron’ 如下图：

原因：下载的串口工具和electron版本不匹配，需要将electron卸载重装

运行以下命令：

npm uninstall electron
npm install --save-dev electron@13.0.0
npm run dev

三、使用serialport串口工具

在需要使用的页面新增方法，打开串口工具
在vue页面新增，打开控制台，可以获取到串口信息

methods: {
    open() {
      const ```{ SerialPort, ReadlineParser } = require("serialport");
      const port = new SerialPort({ path: "COM2", baudRate: 57600 });
      const parser = new ReadlineParser();
      port.pipe(parser);
      port.on("data", function (a) {
        console.log(a);
      });
      parser.on("data", function (a) {
        console.log(a);
      });
      port.write("ROBOT PLEASE RESPOND\n");
    },
  },
  mounted(){
    this.open()
  }

如图：