# 1. 安装核心依赖：vue-router, element-plus, element-plus图标
npm install vue-router element-plus @element-plus/icons-vue

# 2. 安装样式预处理器（推荐）
npm install -D sass

# 3. 运行开发服务器
npm run dev

目录结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Digital-CV/
├── node_modules/         
├── public/               
│   └── favicon.ico       (例如，网站的图标)
├── src/                  (核心代码目录)
│   ├── assets/           (静态资源：图片、字体、全局CSS)
│   │   ├── images/       (项目截图、头像等)
│   │   └── styles/       (全局样式或Sass变量文件)
│   ├── components/       (小型、可复用的 UI 组件)
│   │   ├── ProjectCard.vue  (作品列表页使用的单个卡片)
│   │   └── SocialLinks.vue  (社交媒体链接图标组)
│   ├── router/           (路由配置)
│   │   └── index.js      (定义所有路由路径)
│   ├── views/            (完整页面组件 - 对应路由)
│   │   ├── Home.vue      (主页)
│   │   ├── Resume.vue    (简历页)
│   │   ├── Projects.vue  (作品列表页)
│   │   └── ProjectDetail.vue (作品详情页)
│   ├── App.vue           (主布局文件：包含菜单和 <router-view>)
│   └── main.js           (入口文件：创建 Vue 实例、引入 Element Plus 和 Router)
├── .gitignore            
├── index.html            (Vite 入口 HTML 文件)
├── package.json          
└── vite.config.js

为了帮助你作为 Vue 初学者复现这个项目，我将核心技术点提炼为 5 个关键模块。你只要掌握这 5 点，就能把这个项目完整做出来，并且理解其中的逻辑。

1. 核心骨架：Vue Router 路由管理

这是单页应用（SPA）的灵魂。你需要理解“页面”在 Vue 中其实就是“组件的切换”。

  • 核心概念：

    • 路由配置 (router/index.js)：如何定义 URL 和 组件 (.vue 文件) 的对应关系。

    • 路由出口 (<router-view>)：在 App.vue 中挖一个“坑”，告诉 Vue 把匹配到的页面组件填在哪里。

    • 路由跳转：

      • 声明式：<router-link> (在菜单中使用)。

      • 编程式：router.push() (在点击按钮或卡片时，在 JS 代码中使用)。

2. 数据传递：动态路由匹配 (难点 & 重点)

这是实现“点击作品列表 -> 进入对应详情页”的关键。

  • 核心概念：

    • 定义参数：在路由配置里写 /project/:id，这里的 :id 就是占位符。

    • 传递参数：跳转时写 router.push('/project/1')，把 1 传过去。

    • 接收参数：在详情页 (ProjectDetail.vue) 中，使用 useRoute() 钩子拿到 route.params.id。

    • 逻辑闭环：拿到 id 后，去数组里 .find() 对应的数据并在页面显示。

3. 语法标准：Vue 3 组合式 API (<script setup>)

这是目前 Vue 最主流的写法，比老式的 Options API 更简洁。

  • 核心概念：

    • ref：定义响应式数据（比如 const project = ref(null)）。只要这个变量变了，页面会自动更新。

    • onMounted：生命周期钩子。告诉 Vue “当组件挂载完毕（页面加载好）后，立马执行里面的代码”（通常用于初始化数据）。

    • import：组件不需要注册，引入即可直接在 <template> 中使用。

4. 页面渲染：列表渲染 (v-for)

在“作品列表页”中，你不可能手写 10 个卡片，而是根据数据循环生成。

  • 核心概念：

    • 数据源：一个数组（Array），里面装着对象（Object）。

    • 指令：<div v-for="item in projects" :key="item.id">。

    • 原理：数组里有几条数据，Vue 就帮你生成几个 HTML 元素。

5. 外观与布局：Element Plus 组件库

初学者不要花太多时间写复杂的 CSS 布局，学会“搭积木”。

  • 核心概念：

    • 按需/全局引入：在 main.js 里告诉 Vue 使用这个库。

    • 组件使用：

      • el-menu：做顶部导航。

      • el-card：做项目展示卡片。

      • el-timeline：做简历的时间轴。

      • el-row / el-col：做栅格布局（把页面分成 24 列，控制排版）。

🚀 给你的复现路线建议

如果你要自己动手写一遍，建议按照这个顺序攻克：

  1. 第一关：环境搭建

    • 用 npm create vue@latest 初始化项目，删掉自带的 HelloWorld 代码。

  2. 第二关：跑通路由

    • 先建好 4 个空白文件 (Home.vue 等)。

    • 配置 router/index.js，确保在浏览器地址栏输入 /resume 能看到不同的字。

  3. 第三关：全局布局

    • 在 App.vue 里写好导航栏 (el-menu)，下面放 <router-view>。确保点击菜单能切换页面。

  4. 第四关：列表页 (Projects.vue)

    • 手写一个数组数据 const list = [...]。

    • 用 v-for 把它们渲染成一排排的卡片。

  5. 第五关：详情页逻辑 (BOSS 战)

    • 给卡片加点击事件 @click。

    • 实现跳转并携带 ID。

    • 在详情页获取 ID 并显示对应内容。

这样一步步来，你不会觉得乱，每一步都能看到成果！加油！