使用vue3实现一个人喵交流小程序

下面是使用Vue3实现一个人喵交流小程序的完整攻略。

准备工作

在开始实现之前，我们需要完成以下准备工作：

安装 Node.js（版本需>=14）以及 npm（或者使用 yarn）；
在命令行中安装 Vue CLI 3：npm install -g @vue/cli。

创建项目

使用 Vue CLI 3 创建一个新的项目：

vue create cat-talk

在创建项目时，选择“Manually select features”并选中“Router”“Vuex”“SCSS”。

安装相关依赖：

npm install

编写页面

首先编写页面路由。在 src/router/index.js 文件中添加以下内容：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/chatroom',
    name: 'Chatroom',
    component: () => import(/* webpackChunkName: "chatroom" */ '../views/Chatroom.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

其中，我们定义了两个路由：/对应的 Home 页面和 /chatroom 对应的 Chatroom 页面。

编写 Home 页面，在 src/views/Home.vue 文件中添加以下内容：

<template>
  <div class="home">
    <h1>Welcome to Cat Talk</h1>
    <button @click="gotoChatroom()">Go To Chatroom</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoChatroom() {
      this.$router.push('/chatroom')
    }
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 68px);
  font-size: 1.5rem;
}

button {
  font-size: 1.2rem;
  padding: 8px 16px;
  background-color: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #34495e;
}
</style>

在 Home 页面中，我们添加了一个标题，并在页面中间放置了一个 button 按钮，用于跳转到 Chatroom 页面。同时，我们添加了路由跳转的方法 gotoChatroom 。

接着，我们编写 Chatroom 页面，在 src/views/Chatroom.vue 文件中添加以下内容：

<template>
  <div class="chatroom">
    <div class="chatroom-header">
      <h1>人喵聊天室</h1>
      <router-link to="/">回到首页</router-link>
    </div>
    <div class="chatroom-content">
      <div class="chat-list">
        <div v-for="item in chatList" :key="item.id" class="chat-item">
          <div class="avatar">
            <img :src="item.avatar" alt="">
          </div>
          <div class="chat-content">
            <div class="chat-user">
              {{item.username}} <span class="chat-time">{{item.time}}</span>
            </div>
            <div class="chat-message">{{item.message}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="chatroom-footer">
      <input type="text" placeholder="请输入聊天内容..." v-model.trim="message" @keyup.enter="sendMessage">
      <button @click="sendMessage()">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Chatroom',
  data() {
    return {
      message: '',
      chatList: [
        { id: 1, username: '喵喵', avatar: 'https://randomuser.me/api/portraits/thumb/men/1.jpg', time: '10:20', message: '在吗？' },
        { id: 2, username: '人类', avatar: 'https://randomuser.me/api/portraits/thumb/women/1.jpg', time: '10:21', message: '在的' },
        { id: 3, username: '喵喵', avatar: 'https://randomuser.me/api/portraits/thumb/men/1.jpg', time: '10:22', message: '你怎么这么慢回复啊' }
      ]
    }
  },
  methods: {
    sendMessage() {
      if (this.message) {
        this.chatList.push({
          id: this.chatList.length + 1,
          username: '人类',
          avatar: 'https://randomuser.me/api/portraits/thumb/women/1.jpg',
          time: new Date().toLocaleTimeString(),
          message: this.message
        })
        this.message = ''
      }
    }
  }
}
</script>

<style scoped>
.chatroom {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chatroom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 68px;
  background-color: #2c3e50;
  color: #fff;
}

.chatroom-header h1 {
  font-size: 1.5rem;
  margin: 0;
}

.chatroom-header a {
  font-size: 1.2rem;
  color: #fff;
  text-decoration: none;
}

.chatroom-content {
  flex: 1;
  padding: 16px;
  background-color: #f5f5f5;
  overflow-y: auto;
}

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-item {
  display: flex;
  gap: 8px;
}

.avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-user {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  color: #777;
}

.chat-time {
  margin-left: 8px;
  font-size: 1rem;
  color: #999;
}

.chat-message {
  margin-top: 4px;
  font-size: 1.2rem;
  white-space: pre-line;
}

.chatroom-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #fff;
}

.chatroom-footer input {
  flex: 1;
  margin-right: 16px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.chatroom-footer button {
  padding: 4px 8px;
  background-color: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.chatroom-footer button:hover {
  background-color: #34495e;
}
</style>

在 Chatroom 页面中，我们分别定义了聊天列表 chatList 和输入框内容 message 的数据属性，并添加了发送消息的方法 sendMessage 。同时，我们使用了 Vue 3 的 v-for 指令来循环展示聊天列表，使用了 v-model 指令将输入框的值和数据属性 message 绑定，使用 @keyup.enter 绑定 Enter 键事件来响应键盘回车按键。

运行程序

最后，运行项目并查看效果：

npm run serve

访问 http://localhost:8080/ 可以看到 Home 页面，并通过点击跳转到 Chatroom 页面。

示例说明一

上面的代码中，我们使用了 Vue 3 的新特性响应式 API ref 和 reactive。具体来说，在 Chatroom 页面中，我们定义了 chatList 和 message 两个数据属性：

data() {
  return {
    message: '',
    chatList: [
      { id: 1, username: '喵喵', avatar: 'https://randomuser.me/api/portraits/thumb/men/1.jpg', time: '10:20', message: '在吗？' },
      { id: 2, username: '人类', avatar: 'https://randomuser.me/api/portraits/thumb/women/1.jpg', time: '10:21', message: '在的' },
      { id: 3, username: '喵喵', avatar: 'https://randomuser.me/api/portraits/thumb/men/1.jpg', time: '10:22', message: '你怎么这么慢回复啊' }
    ]
  }
},

当 chatList 和 message 发生变化时，Vue 3 会自动更新页面的数据渲染。这样，在 sendMessage 方法中不需要手动调用 this.$forceUpdate() 可以更新页面。

示例说明二

上面的代码中，我们使用了 Vue 3 的新特性 v-model 的修饰符 trim。具体来说，在 Chatroom 页面中，我们使用以下代码将输入框的值和数据属性 message 绑定：

<input type="text" placeholder="请输入聊天内容..." v-model.trim="message" @keyup.enter="sendMessage">

这里添加了修饰符 trim，表示去除输入框的前后空格。这样，当用户在输入框输入完内容后按回车键发送消息时，输入框内的空格不会传递给数据属性 message，从而保证了发送的消息内容正确。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用vue3实现一个人喵交流小程序 - Python技术站