帮我用vue和css创建一个添加好友的功能

好的，我可以指导你实现这个功能。

首先，你需要创建一个 Vue 组件来实现添加好友的功能。在该组件中，你需要有一个表单来收集好友信息，并使用 CSS 来美化表单样式。

这里提供一个简单的示例：

<template>
  <div class="add-friend">
    <h2>添加好友</h2>
    <form>
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" id="name" v-model="name" required>
      </div>
      <div class="form-group">
        <label for="age">年龄</label>
        <input type="number" id="age" v-model="age" required>
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" v-model="email" required>
      </div>
      <button @click.prevent="addFriend">添加好友</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: '',
      email: ''
    }
  },
  methods: {
    addFriend() {
      // 在此处编写添加好友的逻辑
    }
  }
}
</script>

<style>
.add-friend {
  max-width: 500px;
  margin: 0 auto;
}

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

.form-group {
  margin: 10px 0;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>

在上面的示例中，我们创建了一个名为 `add-friend` 的组件，其中包含一个表单和一个添加好友的按钮。表单中包含三个输入框，分别用于输入姓名、年龄和邮箱。这些输入框的值都与 Vue 实例中的数据绑定，通过 `v-model` 指令实现。

我们还定义了一个 `addFriend` 方法，用于在用户点击添加好友按钮时执行添加好友操作。你需要在这个方法中编写添加好友的逻辑，例如将好友信息提交到后端进行处理。

最后，我们使用 CSS 来美化表单样式。我们将表单和输入框都居中显示，并为输入框添加了一些样式，使其看起来更好看。当然，你可以根据自己的需要来修改样式。