Vue elementui 个人中心页面

好的，关于Vue和ElementUI的个人中心页面，你需要先安装Vue和ElementUI。可以通过以下命令进行安装：

npm install vue
npm install element-ui

安装完成后，你可以创建一个Vue组件来展示个人中心页面。以下是一个简单的例子：

<template>
  <div>
    <h1>{{ name }}的个人中心</h1>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="basic">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="password">
        <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input type="password" v-model="passwordForm.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="passwordForm.newPassword"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="passwordForm.confirmPassword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitPasswordForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { Tabs, TabPane, Form, FormItem, Input, Radio, RadioGroup, Button } from 'element-ui';

export default {
  name: 'Profile',
  components: {
    ElTabs: Tabs,
    ElTabPane: TabPane,
    ElForm: Form,
    ElFormItem: FormItem,
    ElInput: Input,
    ElRadio: Radio,
    ElRadioGroup: RadioGroup,
    ElButton: Button,
  },
  data() {
    return {
      name: '张三',
      activeName: 'basic',
      form: {
        name: '',
        age: '',
        gender: '',
      },
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值' },
        ],
        gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
      },
      passwordRules: {
        oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.passwordForm.newPassword) {
                callback(new Error('两次输入密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
      },
    };
  },
  methods: {
    handleClick(tab) {
      console.log(tab.name);
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('submit');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    submitPasswordForm() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          console.log('submit password');
        } else {
          console.log('error submit password!!');
          return false;
        }
      });
    },
  },
};
</script>

在这个组件中，我们使用了ElementUI的Tabs和TabPane组件来展示不同的页面内容，同时也使用了Form、Input、Radio、Button等组件来实现表单功能。你可以根据自己的需求来添加其他ElementUI组件来美化页面。

在页面中展示个人信息的数据可以通过从后端获取，也可以直接写死在Vue组件中。上面的例子中展示了一些写死的数据，你可以根据自己的需求来修改。

希望这个例子可以帮助你实现Vue和ElementUI的个人中心页面。