prototype_design/src/views/UserProfileView.vue

<template>
  <div class="container user-profile">
    <h1>个人中心</h1>
    <h2>用户名: {{ user.name }}</h2>
    <p>邮箱: {{ user.email }}</p>
    <p>手机号: {{ user.phone }}</p>
    <button @click="editProfile">编辑资料</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const user = ref({
  name: '张三',
  email: 'zhangsan@example.com',
  phone: '13800138000'
})

const editProfile = () => {
  // 在这里实现编辑用户资料的逻辑
}
</script>

<style scoped>
.user-profile {
  padding: 20px;
}
</style>