个人主页vue+ant design vue

### 使用 Vue 和 Ant Design Vue 创建个人主页 #### 安装依赖库 为了使用 Vue 和 Ant Design Vue 构建个人主页，首先需要安装必要的依赖项。可以通过 npm 或 yarn 来完成这些操作。 ```bash npm install ant-design-vue vue-router vuex axios ``` 或者使用 Yarn： ```bash yarn add ant-design-vue vue-router vuex axios ``` 这一步骤确保项目能够访问到所需的 UI 组件和其他工具函数[^1]。 #### 初始化项目配置 在 `main.js` 文件中引入 Ant Design Vue 并注册全局组件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App); app.use(Antd).mount('#app'); ``` 此设置使得整个应用程序都可以方便地调用 Ant Design 的各种组件。 #### 设计页面布局 对于个人主页来说，通常会有一个导航栏、侧边菜单以及主要内容区域。可以利用 `a-layout`, `a-menu` 等组件来快速搭建基础框架。 ```html <template> <a-layout> <!-- 头部 --> <a-layout-header style="background:#fff;padding:0"> <h1>我的个人空间</h1> </a-layout-header> <!-- 左侧菜单 --> <a-layout-sider width="200" style="background:white;"> <a-menu mode="inline" :default-selected-keys="[current]" @click="handleClick"> <a-menu-item key="home">首页</a-menu-item> <a-menu-item key="about">关于我</a-menu-item> <a-menu-item key="projects">作品集</a-menu-item> </a-menu> </a-layout-sider> <!-- 主体内容区 --> <a-layout-content style="padding:24px;margin-top:64px;min-height:85vh;background-color:white;"> <router-view></router-view> </a-layout-content> <!-- 底部版权信息 --> <a-layout-footer style="text-align:center;">© 2023 Created by Your Name</a-layout-footer> </a-layout> </template> <script setup lang="ts"> // 路由切换逻辑... let current = ref('home'); function handleClick(e:any){ console.log('点击了:', e.key); } </script> ``` 上述代码片段展示了如何组合多个 Ant Design Vue 提供的基础组件形成完整的页面结构。 #### 配置路由管理 为了让不同的链接指向对应的视图，在项目的根目录下新建一个名为 `router/index.ts` 的文件用于定义路由规则。 ```typescript import { createRouter, createWebHistory } from "vue-router"; import HomeView from "../views/HomeView.vue"; export default createRouter({ history: createWebHistory(), routes:[ { path:'/', name:'Home', component:HomeView, }, { path:'/about', name:'About', component:() => import("../views/AboutView.vue"), }, { path:'/projects', name:'Projects', component:() => import("../views/ProjectListView.vue"), } ] }); ``` 通过这种方式实现了单页应用中的多页面浏览体验。 #### 动态加载数据 如果希望从服务器获取个人信息或其他资源，则可通过 Axios 发起 HTTP 请求并将返回的数据绑定至前端界面显示出来。 ```javascript axios.get('/api/userInfo') .then(response=>{ this.userInfo=response.data; }) .catch(error=>console.error(error)); ``` 这种做法不仅提高了性能还增强了系统的可维护性和扩展性[^2]。