用vue写一个好看的个人详细信息页面

好的，以下是一个简单的示例，使用Vue和Bootstrap Vue库来创建一个好看的个人详细信息页面：

<template>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-3">
        <div class="card">
          <div class="card-body">
            <img class="img-fluid rounded-circle mb-3" :src="avatar" alt="Avatar">
            <h4 class="card-title">{{ name }}</h4>
            <p class="card-text">{{ profession }}</p>
            <hr>
            <ul class="list-group list-group-flush">
              <li class="list-group-item"><strong>Email:</strong> {{ email }}</li>
              <li class="list-group-item"><strong>Phone:</strong> {{ phone }}</li>
              <li class="list-group-item"><strong>Address:</strong> {{ address }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-9">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">About Me</h4>
            <hr>
            <p class="card-text">{{ aboutMe }}</p>
          </div>
        </div>
        <div class="card mt-3">
          <div class="card-body">
            <h4 class="card-title">Skills</h4>
            <hr>
            <div class="row">
              <div class="col-md-6 mb-3" v-for="(skill, index) in skills" :key="index">
                <div class="progress">
                  <div class="progress-bar" role="progressbar" :style="{ width: skill.level + '%' }" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">{{ skill.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card mt-3">
          <div class="card-body">
            <h4 class="card-title">Experience</h4>
            <hr>
            <div class="row">
              <div class="col-md-12" v-for="(experience, index) in experiences" :key="index">
                <h5>{{ experience.position }}</h5>
                <h6>{{ experience.company }}</h6>
                <p>{{ experience.description }}</p>
                <ul>
                  <li v-for="(achievement, index) in experience.achievements" :key="index">{{ achievement }}</li>
                </ul>
                <hr>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'John Doe',
      profession: 'Web Developer',
      avatar: 'https://via.placeholder.com/150',
      email: 'john.doe@example.com',
      phone: '+1 123-456-7890',
      address: '123 Main St, Anytown USA',
      aboutMe: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu scelerisque nunc, eget pulvinar lacus. Vivamus fringilla sem eget ante consectetur, ac varius magna egestas. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce lacinia fringilla arcu vel commodo. Cras iaculis elementum arcu, at tristique leo suscipit ut. Nam vitae metus in ante aliquam tincidunt. Donec euismod mi vel lorem aliquet, in malesuada augue luctus.',
      skills: [
        { name: 'HTML', level: '90' },
        { name: 'CSS', level: '80' },
        { name: 'JavaScript', level: '70' },
        { name: 'Vue.js', level: '60' },
        { name: 'Bootstrap', level: '50' },
      ],
      experiences: [
        {
          position: 'Web Developer',
          company: 'ABC Inc',
          description: 'Developed and maintained company websites using HTML, CSS, and JavaScript.',
          achievements: [
            'Developed a new website that increased traffic by 30%',
            'Implemented responsive design to improve mobile user experience',
          ],
        },
        {
          position: 'UI Designer',
          company: 'XYZ Corp',
          description: 'Designed user interfaces for company websites and mobile apps using Sketch and Adobe Creative Suite.',
          achievements: [
            'Created a new design system that improved consistency across all products',
            'Collaborated with development team to ensure designs were implemented accurately',
          ],
        },
      ],
    };
  },
};
</script>

在这个示例中，我们使用了Bootstrap Vue库来创建响应式的布局和样式，使用了Vue的模板语法来渲染数据。

页面包括两个主要部分：左侧是个人信息的摘要，右侧是关于我、技能和经验的详细信息。

你可以根据你的需求和设计自由地编写你的个人详细信息页面，同时也可以使用其他UI库来实现不同的样式和布局。