vue2+vant写一个个人中心页面

非常感谢您的提问！以下是一个简单的 Vue2 + Vant 的个人中心页面示例：

<template>
  <div class="personal-center">
    <van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="goBack" />
    <van-cell-group>
      <van-cell title="用户名" :value="username" />
      <van-cell title="手机号" :value="phone" />
      <van-cell title="邮箱" :value="email" />
      <van-cell title="地址" :value="address" />
      <van-cell title="修改密码" is-link @click="goToChangePassword" />
      <van-cell title="退出登录" is-link @click="logout" />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: 'John Doe',
      phone: '1234567890',
      email: 'johndoe@example.com',
      address: '123 Main St, Anytown USA',
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goToChangePassword() {
      this.$router.push('/change-password');
    },
    logout() {
      // TODO: Implement logout functionality
    },
  },
};
</script>

<style scoped>
.personal-center {
  padding-top: 44px;
}
</style>

希望这个示例能够帮助您！