用vue3写一个个人信息页面并附上代码

好的，以下是一个简单的个人信息页面的Vue3代码示例：

<template>
  <div class="profile">
    <div class="avatar">
      <img :src="avatarUrl" alt="Avatar" />
    </div>
    <div class="info">
      <h1>{{ name }}</h1>
      <p>{{ bio }}</p>
      <ul>
        <li><strong>Email:</strong> {{ email }}</li>
        <li><strong>Phone:</strong> {{ phone }}</li>
        <li><strong>Address:</strong> {{ address }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  data() {
    return {
      name: 'John Doe',
      bio: 'I am a software engineer',
      email: 'johndoe@example.com',
      phone: '123-456-7890',
      address: '123 Main Street, Anytown USA',
      avatarUrl: 'https://via.placeholder.com/150' // 默认头像
    }
  }
}
</script>

<style>
.profile {
  display: flex;
  align-items: center;
  margin: 2rem;
}

.avatar {
  margin-right: 2rem;
}

.avatar img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 0.5rem;
}

li strong {
  display: inline-block;
  width: 6rem;
}
</style>

这个简单的个人信息页面包含一个头像、姓名、简介、电子邮件、电话和地址等信息，您可以根据自己的需要进行修改。在Vue3中，我们使用`<script setup>`或`<script>`标签来定义Vue组件的逻辑部分。在这个例子中，我们使用了`<script>`标签来定义Vue组件的逻辑。同时，我们还定义了一些简单的CSS来美化页面。