在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博客
然后回到起点
