vue 收到后端websockect发送过来的消息后弹窗显示该消息，websockect写在App.vue中

可以在 `App.vue` 中使用 `vue-websocket` 库来实现 WebSocket 连接，然后接收后端 WebSocket 发送过来的消息并弹窗显示。

以下是一个简单的示例代码：

<template>
  <div class="app">
    <h1>My App</h1>
  </div>
</template>

<script>
import Vue from 'vue'
import VueWebSocket from 'vue-websocket'

Vue.use(VueWebSocket, 'ws://localhost:3000') // 替换成后端 WebSocket 服务器地址

export default {
  name: 'App',
  mounted () {
    this.$options.sockets.onmessage = (event) => {
      // 接收到 WebSocket 消息后弹窗显示
      alert(event.data)
    }
  }
}
</script>

在 `mounted` 生命周期函数中，使用 `this.$options.sockets.onmessage` 监听 WebSocket 的消息事件，一旦接收到消息，就会弹窗显示该消息。其中 `event.data` 表示接收到的消息内容。需要将 `ws://localhost:3000` 替换成实际的后端 WebSocket 服务器地址。

相关问题

在app.vue里面写弹窗 为什么改不了样式

可能是因为你的样式被其他样式所覆盖了。你可以尝试使用更具体的 CSS 选择器，或者在样式属性后面使用 `!important` 来强制使用该样式。例如：

.my-dialog {
  background-color: red !important;
}

另外，如果你使用了第三方框架或库来实现弹窗功能，可能需要查看该框架或库的文档，了解该如何修改弹窗的样式。

vue中app.vue里面router-view中不可以写代码吗?

在Vue的app.vue文件中，router-view是用来展示路由对应组件的占位符。因为它的作用是单纯地显示组件内容，所以不建议在router-view中直接写代码。

在Vue中，我们通常将路由的组件逻辑写在各自的.vue文件中，在app.vue的router-view中展示这些组件。这样做的好处是，组件的逻辑和展示可以分离，便于维护和重用。

如果需要在app.vue中写代码，可以考虑在router-view之外添加其他组件或者标签来实现。注意要保持良好的组件化原则，在app.vue中的逻辑代码应当尽量简洁、清晰，并且主要负责布局和整体逻辑控制，不宜包含过多的具体业务代码。

总结来说，虽然在router-view中不宜直接写代码，但我们可以通过合理的组件拆分和设置，在app.vue中实现相应的逻辑需求。