elementplus个人主页vue3.0

Element Plus是一个基于Vue 3.0的开源UI库，它对Element UI进行了现代化和精简。在构建个人主页时，你可以利用Element Plus提供的各种预设组件，让页面更简洁高效。以下是如何使用Element Plus构建一个基本的个人主页示例：

首先，在`.vue`文件中引入Element Plus的依赖，并设置一些基本配置：

<template>
  <el-container>
    <el-header>个人主页</el-header>
    <el-container>
      <el-aside>侧边栏</el-aside>
      <el-main>
        <el-collapse v-model="activeName">
          <!-- 显示个人信息的卡片 -->
          <el-collapse-item
            v-for="(item, index) in items"
            :key="index"
            :title="item.title"
          >
            <el-collapse-item-body>
              <div>{{ item.content }}</div>
            </el-collapse-item-body>
          </el-collapse-item>
        </el-collapse>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ElCollapse, ElCollapseItem } from "element-plus";
import { ref } from "vue";

const activeName = ref("1");
let items = [
  { title: "简介", content: "这是关于我的..." },
  // 其他个人信息项...
];
</script>

<style>
/* 自定义样式 */
.el-header {
  background-color: #f5f6f7;
}

/* 适配Element Plus的主题 */
</style>

在这个例子中，我们使用了`ElHeader`作为头部，`ElAside`作为侧边栏，`ElCollapse`展示个人信息卡片。`items`数组存储用户的个人信息内容。