electron-vue 使用serialport读取数据 完整代码

以下是一个使用 electron-vue 读取串口数据的完整代码示例：

1. 安装 serialport 库

npm install serialport

2. 在 vue 组件中引入 serialport 库

import SerialPort from 'serialport'

3. 在 vue 组件中添加以下代码来读取串口数据

// 打开串口
let port = new SerialPort('COM1', {
  baudRate: 9600
})

// 监听串口数据
port.on('data', function (data) {
  console.log('Data:', data.toString())
})

完整的 vue 组件代码示例：

<template>
  <div class="serialport-test">
    <h1>SerialPort Test</h1>
    <button @click="openPort">Open Port</button>
    <button @click="closePort">Close Port</button>
    <div>
      <p>Received Data:</p>
      <pre>{{receivedData}}</pre>
    </div>
  </div>
</template>

<script>
import SerialPort from 'serialport'

export default {
  name: 'SerialPortTest',
  data () {
    return {
      port: null,
      receivedData: ''
    }
  },
  methods: {
    openPort () {
      this.port = new SerialPort('COM1', {
        baudRate: 9600
      })
      this.port.on('data', (data) => {
        console.log('Data:', data.toString())
        this.receivedData += data.toString()
      })
    },
    closePort () {
      if (this.port) {
        this.port.close()
        this.port = null
      }
    }
  }
}
</script>

注意：在使用串口时，需要在 main.js 文件中添加以下代码：

const SerialPort = require('serialport')

这是因为 electron-vue 项目默认使用 babel 编译，而 serialport 库是原生的 Node.js 模块，需要额外处理才能在 electron 环境中使用。