Vite2 + Strve3：从 0 到 1 实现一款聊天室应用的超简单指南

2023-12-23 13:55:58

Strve.js@3.1.0正式发布，接下来我们来实操一下用Vite与Strve3从 0 到 1 实现一款Web聊天室应用。

1. 项目搭建

首先，使用Vite脚手架创建一个新的Vue项目：

  vite create chat-app

2. 安装Strve3

接下来，安装Strve3：

  npm install strve@3

3. 创建聊天室组件

在src/components目录下创建ChatRoom.vue组件：

<template>
  <div class="chat-room">
    <div class="messages">
      <Message v-for="message in messages" :key="message.id" :message="message" />
    </div>
    <form @submit.prevent="sendMessage">
      <input type="text" v-model="newMessage" placeholder="Type your message here..." />
      <button type="submit">Send</button>
    </form>
  </div>
</template>

<script>
import { Strve } from "strve";
import Message from "./Message.vue";

export default {
  components: {
    Message,
  },
  data() {
    return {
      messages: [],
      newMessage: "",
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim()) {
        this.messages.push({
          id: Date.now(),
          message: this.newMessage,
        });
        this.newMessage = "";
      }
    },
  },
  mounted() {
    Strve.subscribe("chat-room", (message) => {
      this.messages.push(message);
    });
  },
};
</script>

<style>
.chat-room {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.messages {
  flex: 1;
  overflow-y: auto;
}

form {
  display: flex;
  align-items: center;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #337ab7;
  color: #fff;
  cursor: pointer;
}
</style>

4. 创建消息组件

在src/components目录下创建Message.vue组件：

<template>
  <div class="message">
    <p>{{ message.message }}</p>
  </div>
</template>

<script>
export default {
  props: ["message"],
};
</script>

<style>
.message {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

5. 在App.vue中使用聊天室组件

在src/App.vue文件中，使用聊天室组件：

<template>
  <div id="app">
    <ChatRoom />
  </div>
</template>

<script>
import ChatRoom from "./components/ChatRoom.vue";

export default {
  components: {
    ChatRoom,
  },
};
</script>