electron-vue使用serialport串口通信及踩过的坑（已解决！）

打工S，上周小T说公司需要开发一个安卓ipad应用，于是百度electron-vue[皱眉]...

言归正传...

一、配置环境

node -v
npm -v
python 2.7// 我这里安装版本2.7，并添加到系统-环境变量 据说其他版本会有诡异的问题...

二、创建

（官网也有一个简单demo 可以直接git clone https://github.com/electron/electron-quick-start，我这里手动创建

vue init simulatedgreg/electron-vue my-project

三、安装

// 依赖
npm install || cnpm install

// 安装node-gyp 用于调用其他语言编写的程序
npm install -g node-gyp

// 安装 serialport 库
npm install serialport -save 

// 通过 electron-rebuild 包重新编译原生模块
npm install --save-dev electron-rebuild 

// 编译
 .\node_modules.bin\electron-rebuild.cmd 

到 .\node_modules.bin\electron-rebuild.cmd  这一步一般会出问题了 如果没有 略过..直接下一步（天选之子啊！[羡慕泪水]）

到这里出现报错，这里其实是electron与node版本不匹配的原因，之前还有其他报错 具体原因具体分析

 解决方法：

 这里可以看到electron支持的node版本，由于我本地安装的electron为23.0.0 所以出现报错 遂删除并重新安装electron22.0.0，此时electron -v居然仍然出现23.0.0（再次玉玉了...）但重新尝试编译发现

.\node_modules\.bin\electron-rebuild.cmd
√ Rebuild Complete

成功了！[转圈]

四、调用serialport开始开发

const { SerialPort } = require('serialport')
// 注意这里 也是一个坑，必须是{ SerialPort }！！
// const SerialPort = require('serialport') 你将会得到 require is defined

// 获取串口列表
    SerialPort.list().then(
      ports => {
        //ports 串口信息
        _this.portsList = ports
      }
    )

五、连接串口通信

// 连接
    async connectBtn() {
      if (this.btnType === 'primary') {
        // 串口参数
        this.ports = new SerialPort({
          path: this.form.port,
          baudRate: Number(this.form.baudRate),
          dataBits: this.form.dataBits,
          parity: this.form.parity,
          stopBits: this.form.stopBits,
          autoOpen: false
        })
        // const parser = this.ports.pipe(new Delimiter({delimiter: Buffer.from([0x03, 0x02])}))
        await this.ports.open(error => {
          if (error) { 
            console.log('打开串口失败, ' + error) 
            this.$message.error('串口连接失败')
          } 
            else {
              console.log('打开串口成功')
              this.$message.success('串口连接成功')
              this.btnType = 'danger'
              this.btnText = '关闭串口'
              this.ports.on('data', data => {console.log('收到串口数据：' + data)})
            }
        })
      } else {
        this.myserialport.openPort(this.form.port, false, this.callBack)
        this.$message.success('串口关闭成功')
        this.btnType = 'primary'
        this.btnText = '连接串口'
      }
    },

六、其他

如果想要使用其他依赖 比如element

// 安装element
npm i element-ui -S

在main.js引入

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'

import '@/style/index.css' // global css
// 配置element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

此时在引用过程中也遇到了意外... 

el-table显示空白（数据及安装都正常的情况下），于是又开始漫长寻找解决办法...

webpack.renderer.config.js文件，将

let whiteListedModules = ['vue']
改为
let whiteListedModules = ['vue', 'element-ui']

七、后续...

到这里就可以进行漫长的开发啦（。。。过关斩将，有bug通通解决！），这里还没有打包编译进行运用，猜测后续打包运行应该又会遇到各种问题[00不是/没有/不可能00]

打包过程会继续记录，期待吧...

---

更新：

打包过程文档

http://t.csdn.cn/6uGGh