Vue中使用Web Serial API连接串口，实现通信交互

<template>
  <div>
    <div v-if="!isConnected">
      <button @click="requestPort">连接串口</button>
    </div>
    <div v-else>
      <button @click="disconnect">断开连接</button>
      <button @click="sendData">发送数据</button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isConnected: false,
      port: null,
    };
  },
  methods: {
    async requestPort() {
      try {
        this.port = await navigator.serial.requestPort();
        await this.port.open({ baudRate: 9600 });
        this.isConnected = true;
        this.readPortData();
      } catch (error) {
        console.error(error);
      }
    },
    disconnect() {
      if (this.port) {
        this.port.close();
        this.port = null;
        this.isConnected = false;
      }
    },
    sendData() {
      if (this.port) {
        const writer = this.port.writable.getWriter();
        const data = new TextEncoder().encode('Your data here');
        writer.write(data).then(() => {
          writer.close();
        }).catch(error => console.error(error));
      }
    },
    async readPortData() {
      if (this.port) {
        const reader = this.port.readable.getReader();
        while (true) {
          const { value, done } = await reader.read();
          if (done) {
            reader.cancel();
            break;
          }
          // Handle incoming data
          console.log(new TextDecoder().decode(value));
        }
      }
    }
  }
};
</script>

这个代码实例提供了一个简化的Vue组件，用于连接串口和与之交互。它展示了如何使用Web Serial API来请求串口，打开串口，发送数据，接收数据，并在不需要时关闭串口。注意，实际应用中你需要根据自己的需求和硬件设备来调整波特率和数据处理方式。