slug
type
status
date
summary
tags
category
comment
icon
password
一名大学生的前端开发练习
一名大学生的前端开发练习
 

📝 起因

原本的个人主页采用的是一个开源示例:
responsive-portfolio-website
ASouthernCatUpdated Nov 6, 2025
作为个人主页来说,该项目并不足以满足我的需求
  • 灵活:高度的自定义、灵活、可调整
  • 美观:具有设计感,让人眼前一亮
  • 展示:展现我的能力、理念和价值
    • 能力:在学习过程中优化该项目
    • 理念:简洁、高效的解决问题
    • 价值:能为用户提供什么问题
此外,可能还有社交媒体的影响
  • 程序员没博客?做贼酷炫个人网站的5个技巧!_哔哩哔哩_bilibili
 
因此,作出从零开始开发一个个人主页项目的决定
Homepage
publieopleUpdated Nov 26, 2025

 

基础

实际上,我的基础并不牢固
大部分成果都基于 Vibe coding
我让它做最蠢的事情,比如‘把侧边栏内边距减半’,因为我懒得去找它。我永远‘全部接受’,再也不看差异了。遇到错误信息我就直接复制粘贴,通常这就能修复问题。代码量超出我平时的理解范围,真要读懂得花不少时间。有时候大模型解不了 bug,我就绕过去或者随便要求些改动直到问题消失。 ——Andrej Karpathy
同时也依赖各种现成的库和工具
不过阅读手册和文档也是无法避免的
幸运的是,我也偏好上手实践的体验式学习
根据问题来找解决方案是我的日常
  • 文档
    • web.qianguyihao.com:优质的前端图文教程
    • 菜鸟教程 - 学的不仅是技术,更是梦想!:最好的儿童读物
    • MDN Web DocsMDN Web DocsMDN Web Docs:Web 官方文档
    • 以及更多官方/非官方文档,博文
  • 工具
    • Cursor - The AI Code Editor:主要的AI开发手段,几乎不用自己写代码,只要明确自己的需求,AI 就能很好的完成工作
  • 技术栈
    • www.tailwindcss.cn:CSS 框架,生活必需品
    • Magic UI:美观的组件库

 

过程

 
得益于有一定的基础,整个开发过程使用了 git 版本控制,完整的留存了每个版本

 

Stage 0

第一次开发,能学到很多实际开发的经验

 

0. 新建项目

作为初学者来说,第一步总是很困难的
在新建项目这个问题上也有许多困难
诸如技术栈的选择、路径、导入模块等问题
虽然站在前人的肩膀上能看的很远,但也需要学习和接受前人的规范
最终,我选择了 yarn 作为包/项目管理器,使用 vite + TypeScript + react 作为项目框架
 

1. 启动项目

在启动时,遇到一个不算大的问题,但也困扰了我一段时间
由于我的实际工作目录在E盘,所以用了软链接从C盘指向E盘
如果在C盘 yarn dev 会导致路径报错
只能先 cd 到项目目录下再 yarn dev 启动调试

 

2. 开发过程

开发过程中,才发现很多高效的技巧和工作流
  • 通义灵码等插件提供了自动编写提交信息的功能
 
  • 直到 Stage 0 结束前一次提交,才开始使用 TODO 管理开发计划
Stage 0 GRAPH
Stage 0 GRAPH
 

Stage 1

经过第一阶段的练习,有了一定的开发经验
虽然项目其实并没有很复杂,但是整个项目的遗留问题让开发和调试变得低效
因此,趁着项目还不大,我删除了大部分文件,重新创建了整个项目

 

0. 重建项目

重建时,我只保留了 TODO.md , README.md 和 .gitignore
有了 TODO.md 作为开发计划,能更好的规划项目和指导 AI 开发
当然,开发计划也可以让 AI 来写
这次有了经验,避开了所有坑,重建非常顺利

 

1. 瓶颈

布局搭建好后,页面设计陷入了瓶颈
 
如何写一篇优质文章^正则表达式(?=.*工具)(?!.*(?:简介|介绍)).*$
Loading...