在vscode中

新建terminal

输入指令下载mqtt库：npm install mqtt

打开-src-conponents-helloworld.vue

86-129行

<script>
import mqtt from "mqtt";
var client;
const options = {
  port: 8083,
  connectTimeout: 4000,
  clientId: "mqtt_" + Math.random().toString(16).substr(2, 8),
};
client = mqtt.connect("ws://192.168.43.254/mqtt", options);
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created() {
    this.mqttMsg();
  },
  methods: {
    mqttMsg() {
      client.on("connect", (e) => {
        console.log("连接成功");
        client.subscribe("/test/helloworld", { qos: 0 }, (error) => {
          console.log(error);
        });
      });
      client.on("message", (topic, message) => {
        // console.log("收到来自", topic, "的消息", message.toString());
        if(message.toString() == 'hi'){
          client.publish('/test/abc','hello',{
            qos:0, rein: false
          },(error)=>{
            console.log('error',error)
          })
        }
      });
      client.on("reconnect", (error) => {
        console.log("正在重连", error);
      });
      client.on("error", (error) => {
        console.log("连接失败", error);
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {

ctrl+s

https://blog.csdn.net/wzg0817/article/details/107637005

cnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。_IT博客技术分享-CSDN博客

vue:module parse failed和module build failed的解决方案_KendallBranchett的博客-CSDN博客

然后回到起点