简介面向前端新手的豆瓣官网仿站项目以HTML、CSS与JavaScript为核心技术完整还原豆瓣首页的页面布局、视觉风格与基础交互。项目涉及HTML语义化标签、盒模型与浮动、弹性盒与网格布局、媒体查询响应式设计、DOM节点操作、事件绑定与异步数据请求等知识点适合学完前端基础后用来串联知识、积累实战经验。压缩包共194个文件约88.96MB主要包含HTML页面、CSS样式表、JavaScript脚本、演示视频、图片素材、字体图标文件及说明文档同时含有版本管理元数据便于查看项目演变与提交记录。目前已有672人学习下载。项目中包含可运行的仿豆瓣首页源码及图片、字体、视频等静态资源打开网页文件即可查看页面效果通过阅读和修改样式与脚本可以直观理解真实网站的切图、布局、交互与联调流程对准备前端实习或完成课程设计都有参考价值。1. 仿豆瓣官网到底在仿什么核心分离式布局与信息密度很多人第一次打开豆瓣官网第一反应是“这网站怎么这么老气”。但真正动手用前端去仿豆瓣官网时你会发现这个“老气”才是最大的难点顶部导航要压得住整站信息左侧书影音入口要足够窄却不挤右侧榜单和热门内容要在一个栏位里塞下评分、标题、简介和操作按钮同时还不能乱。豆瓣官网前端的本质不是高复杂度交互而是高信息密度下的克制布局以及一套能支撑内容分类的组件化体系。仿它的价值在于你能用一套真实的产品逻辑去练习布局拆分、组件抽象、异步状态管理和性能基线而不是再做一遍“响应式后台管理模板”。这篇文章我会按自己接这类仿站需求时的做法把从工程骨架到组件实现再到上线前验证的完整路径讲清楚适合准备前端面试作品或想系统练一遍中后台以外内容型站点的人。2. 仿豆瓣官网的工程骨架选型、目录结构与设计令牌2.1 为什么选 Vue3 Vite TypeScript 而不是直接 Next.js仿豆瓣官网是一个纯前端展示型项目页面是内容聚合与列表跳转没有强烈的 SSR 或 SEO 诉求。如果直接上 Next.js反而要处理数据获取方式和运行时开销偏离了“仿”这个目标。我一般会用 Vite 5 Vue 3 组合式 API TypeScript理由有三个第一Vite 的开发服务器冷启动和热更新在内容型页面里体感最轻改一个 CSS 变量能毫秒级看到效果第二豆瓣官网的模块大多是“数据进来、组件渲染”组合式函数比 class 组件更容易组织第三TypeScript 能在写 mock 数据和接口定义时提前卡住字段拼写错误这是仿站项目里最常见的低级 bug 来源。工程初始化用官方脚手架Node 版本建议 18 以上命令如下npm create vitelatest douban-clone -- --template vue-ts cd douban-clone npm install npm run dev项目初始目录里只有src/components和src/App.vue这对仿豆瓣官网不够用。我一般会重建目录结构让它按“领域”而不是按“文件类型”组织src/ ├── api/ # 接口定义与 mock 数据入口 ├── assets/ # 静态资源只放站点级 logo 与字体 ├── components/ # 跨页面通用组件如 RatingStars、HoverCard ├── layouts/ # 顶部导航、左右分栏布局组件 ├── modules/ # 按业务域拆分的页面模块 │ ├── book/ # 图书榜、图书条目 │ ├── movie/ # 电影榜、正在热映 │ └── music/ # 音乐推荐 ├── styles/ # 设计令牌、reset、全局工具类 ├── types/ # 各领域的 TypeScript 类型定义 └── utils/ # 请求封装、懒加载工具这样划分的好处是日后如果有人把 mock 接口换成真实后端你只需要改api/目录不用动任何业务组件。豆瓣官网虽然看似是单页但内容域非常清晰图书、电影、音乐三块的列表结构和评分展示几乎一样按领域组织能大幅减少重复代码。2.2 设计令牌豆瓣官网的配色与字号先做成 CSS 变量仿站的第一步不是写布局而是把视觉规范抽成变量。豆瓣官网的主色是绿色但不是那种高饱和的绿而是一种带点灰调的豆绿。顶部导航的背景、选中态、链接 hover 态各有不同的绿。如果直接在组件里写十六进制颜色后续调整会非常痛苦。我会先用 CSS 变量把颜色、字体、间距、圆角全部定义为设计令牌:root { /* 主色与功能色 */ --db-primary: #2e963d; --db-primary-hover: #268a34; --db-primary-light: #e8f5e9; --db-accent-orange: #ffa42e; --db-accent-red: #de5a55; /* 文本层级 */ --db-text-title: #111111; --db-text-body: #444444; --db-text-secondary: #999999; /* 布局与间距 */ --db-header-height: 48px; --db-content-width: 1200px; --db-gap: 16px; /* 字号系统 */ --db-font-size-xs: 12px; --db-font-size-sm: 13px; --db-font-size-md: 14px; --db-font-size-lg: 16px; }设计令牌要写到styles/tokens.css里并在入口文件一次性引入。豆瓣官网的正文默认字号是 12 到 14 像素比现在的后台类项目要小这也是它“信息密度大”的来源。做这个仿站时一定不要为了“现代感”把字号整体调大否则页面宽度和行数全都会变。间距上豆瓣官网大量使用 8 的倍数列表项间距通常 12 到 16 像素左右分栏的间距固定为 18 像素左右。把这些值抽成变量后面写各模块时能保持视觉节奏一致。2.3 布局组件顶部导航 左侧入口 右侧内容的三栏定宽豆瓣官网最稳定的视觉特征是顶栏和左侧竖排的分类入口。顶栏在滚动时固定左侧块是一个独立的栏目容器右侧内容区根据路由切换。这个结构我用三个组件来表达SiteHeader.vue、SideNav.vue和ContentView.vue。先看布局层级的核心代码template div classdb-layout SiteHeader / div classdb-layout__body aside classdb-layout__side SideNav / /aside main classdb-layout__content RouterView / /main /div /div /template style scoped .db-layout { min-height: 100vh; background: #f7f7f5; } .db-layout__body { width: var(--db-content-width); margin: 0 auto; display: flex; gap: var(--db-gap); padding-top: var(--db-gap); } .db-layout__side { flex: 0 0 130px; } .db-layout__content { flex: 1; min-width: 0; } /styleflex: 0 0 130px这行很关键它保证了左侧栏不会因为内容多少而伸缩。min-width: 0加在内容区是为了防止右侧内容里的长英文文本或过渡动画把布局撑破。豆瓣官网的顶栏背景是白色底部有一条1px的浅灰边框滚动时加一个阴影。这里有个容易被忽略的细节官方顶栏的链接不是普通 hover 变色的而是有一个“选中下划线 浅色背景块”的双重状态仿的时候要把这两个状态一起做出来否则一眼就很“假”。3. 仿豆瓣官网的核心模块榜单列表、评分组件与悬浮卡片3.1 评分组件先做计算函数再写 Vue 模板豆瓣官网的评分不是一个简单数字而是星星加数字的组合且数字保留一位小数。图书和电影模块里的评分展示样式几乎一致只有 hover 时的操作按钮不同。这个组件必须抽象出来我在项目里给它起了个名叫RatingStars.vue同时配套一个纯函数getStarClass。先写评分计算逻辑单独放到utils/rating.tsexport const MAX_STAR 5; export function getStarClass(score: number, index: number): string { const rounded Math.round(score * 2) / 2; const base index 1; if (rounded base) { return star--full; } if (rounded base - 0.5) { return star--half; } return star--empty; } export function formatScore(score: number): string { return score.toFixed(1); }逻辑说明豆瓣显示的是“半星”体系比如 8.3 分在视觉上会显示为四个满星、一个半星。用Math.round(score * 2) / 2把分数对齐到 0.5 的倍数再逐个星星比较。最后一颗星若落在base - 0.5就显示半星。这样做的好处是模板里不需要再做任何判断只需要循环五个索引并把结果作为 class 名。组件模板如下template span classrating-stars :aria-label评分 ${formatScore(score)} i v-foridx in 5 :keyidx classrating-stars__item :classgetStarClass(score, idx - 1) / em classrating-stars__score{{ formatScore(score) }}/em /span /template script setup langts const props defineProps{ score: number }(); /script注意这里的v-foridx in 5中的idx是从 1 开始的所以传给getStarClass时要用idx - 1。每个星星用i元素承载避免占用多余的语义标签。数字用em而不是span因为豆瓣官网的评分数字在视觉上是斜体风格使用em可以减少一个类名。半星效果我会在组件样式里用background: linear-gradient(to right, var(--db-accent-orange) 50%, #e3e3e3 50%)来实现比使用两个二维码图片更轻。3.2 榜单模块的列表结构数据数组 迭代渲染 空状态兜底榜单是豆瓣官网首页占比最大的信息块。以图书榜单为例每个条目有排名、封面、标题、作者、出版社、评分和一句简介。真正的豆瓣官网首页有多个榜单每个榜单的条目数不等有的 10 条有的 20 条。仿站时不需要做那么多数据但结构要一致。我建议在modules/book/BookRank.vue里写一个可复用的榜单组件通过 props 传入标题和数据。数据侧的类型定义放在types/book.tsexport interface BookItem { id: string; title: string; author: string; publisher: string; pubYear: string; score: number; cover: string; summary: string; }榜单数据我放到api/mock/books.ts里只准备 10 条左右。注意 mock 数据的封面图不要用豆瓣的图片链接因为盗链和跨域问题都会让仿站项目变得不稳定。稳妥的做法是在项目public/covers/下放几张本地生成的纯色占位图或者用 CSS 渐变替代封面。模板的渲染逻辑ol classbook-rank-list li v-for(item, index) in items :keyitem.id classbook-rank-list__item span classbook-rank-list__index{{ index 1 }}/span div classbook-rank-list__cover img :srcitem.cover :altitem.title loadinglazy / /div div classbook-rank-list__info h4{{ item.title }}/h4 p{{ item.author }} / {{ item.publisher }}/p RatingStars :scoreitem.score / /div /li /ol这里有一个仿豆瓣必须注意的细节榜单序号前三名要用醒目的橙色或红色标识后面的名次用灰色。不要用数组索引直接渲染时加特殊逻辑我推荐在组件内加一个计算属性rankClass(index)返回 “top1” 或 “normal”避免v-if堆在模板里。空状态兜底也很重要豆瓣官网在断网或接口异常时会展示一个简单的“暂时无法加载”。我写的榜单组件会加v-ifitems.length和div classempty两套分支这能让整个仿站在弱网条件下看起来像正经产品。3.3 悬浮卡片鼠标移入时加载预览内容豆瓣官网一个标志性交互是鼠标移动到某本书或某部电影条目上时会弹出一个预览卡片卡片里包含封面、简介、评分和“想看 / 在看 / 看过”操作按钮。这个交互在移动端不存在所以只在桌面端实现即可。悬浮卡片不能每 hover 一个条目就立刻请求接口那样会频繁发送网络请求。常见做法是“移入后等待 300 毫秒如果还停留在当前条目上才请求数据”。我用自己的组合式函数useHoverCard来实现这个逻辑import { ref } from vue; export function useHoverCard(delay 300) { const loading ref(false); const visible ref(false); let timer: ReturnTypetypeof setTimeout | null null; function onEnter() { timer setTimeout(() { visible.value true; loading.value true; }, delay); } function onLeave() { if (timer) { clearTimeout(timer); } visible.value false; loading.value false; } return { loading, visible, onEnter, onLeave }; }useHoverCard返回的onEnter和onLeave绑定到列表条目的mouseenter与mouseleave。卡片组件的定位使用绝对定位它的容器要有position: relative同时卡片层级要设为 100 以上避免被其他内容遮挡。豆瓣官网的悬浮卡位置会根据条目所在列自动调整但这个细节可以留到后面优化第一版固定为“在条目右侧显示”即可。要注意的是卡片弹出后鼠标从条目移动到卡片上mouseleave会触发展开组件的关闭逻辑所以卡片的容器必须放在条目标签内部或者在卡片的mouseenter里清除关闭定时器。3.4 真实异步与假数据为什么仿站也要写请求层很多仿站教程把数据直接写在组件里页面能看但没有任何工程价值。豆瓣官网的数据原本来自接口做仿站时虽然用的是 mock 数据也应该走一遍“接口定义 - 请求函数 - 状态管理”的链路。这一步的价值在于你换真实后端时不需要改动组件代码。我在api/request.ts里写了一个极简的请求封装export async function getMockDataT(data: T, delay 200): PromiseT { return new Promise((resolve) { setTimeout(() resolve(structuredClone(data)), delay); }); }structuredClone是替代JSON.parse(JSON.stringify())的安全深拷贝方案在 Node 18 和现代浏览器里都可用。请求函数写在api/rank.tsimport { getMockData } from ./request; import { mockBookList } from ./mock/books; export function fetchBookRank() { return getMockData(mockBookList, 300); }真实豆瓣接口返回的 JSON 字段名是title、author、summary之类的英文缩写所以 mock 数据字段要与之一致。页面组件里通过onMounted调用请求函数用ref接收数据。这一套流程走下来日后把getMockData换成fetch(/api/rank)并做类型断言迁移成本几乎为零。4. 仿豆瓣官网的性能基线图片、接口与动画的量化目标4.1 图片懒加载与占位策略不要一次加载 200 张封面豆瓣官网的榜单页面图片非常多如果不做懒加载首屏体积会直接爆掉。Vue 3 里最简单的懒加载方案是使用浏览器原生的loadinglazy属性我在第 3 章的榜单模板里已经用上了。但原生懒加载对首屏图片不生效首屏内距离视口较近的图片还是会被立即加载所以需要在项目中加一个自定义指令v-lazy用于延迟加载首屏之外的图片。自定义指令实现如下import type { Directive } from vue; const lazyDirective: DirectiveHTMLImageElement, string { mounted(el, binding) { const observer new IntersectionObserver( (entries) { for (const entry of entries) { if (entry.isIntersecting) { el.src binding.value; observer.disconnect(); } } }, { rootMargin: 200px } ); observer.observe(el); } };使用方式是在img上不写src只写v-lazyitem.cover。注意此时img需要一个初始占位背景我一般会设置一个灰色背景类placeholder或者用一个非常小的base64透明图。rootMargin: 200px的作用是让图片在距离视口还有 200 像素时就开始加载避免滚动到跟前时出现白屏闪烁。还有一个更激进的优化豆瓣官网的封面图是固定尺寸比例约 3:4。所有封面容器都应该提前声明aspect-ratio: 3 / 4这样懒加载期间布局高度不会跳动防止页面出现滚动条抖动的现象。4.2 接口请求合并与节流榜单页的 3 个并发请求控制仿站首页会同时请求图书榜、电影榜、音乐榜三个接口如果不加控制每次路由进入都会发出 3 到 5 个请求。本地 mock 接口虽然不慢但真实接口环境下并发请求多会造成页面白屏时间边长。常见做法是使用Promise.all并行请求然后统一进入 loading 状态。import { ref } from vue; import { fetchBookRank, fetchMovieRank, fetchMusicRank } from ../api/rank; const loading ref(true); const bookItems ref([]); const movieItems ref([]); const musicItems ref([]); async function loadAllRanks() { loading.value true; try { const [book, movie, music] await Promise.all([ fetchBookRank(), fetchMovieRank(), fetchMusicRank() ]); bookItems.value book; movieItems.value movie; musicItems.value music; } finally { loading.value false; } } loadAllRanks();Promise.all有一个缺点三个接口中最慢的那个决定了整个页面的展示时间。如果 mock 接口返回时间差异明显我建议使用Promise.allSettled替代这样单个接口失败不影响另外两个榜单展示同时配合一个“重试单模块”的按钮。对仿站来说这个细节可以在和面试官描述时作为“容错处理”的亮点。4.3 hover 卡片的动画性能只用 transform 与 opacity榜单条的 hover 卡片如果使用left/top属性控制移动会导致重排在快速滑过列表时帧率可能掉到 30fps。正确做法是卡片先以opacity: 0和transform: translateY(8px)隐藏鼠标移入后改变这两个属性。CSS 过渡只写在条件类上.hover-card { position: absolute; z-index: 100; left: 140px; top: 0; width: 280px; opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; } .hover-card--active { opacity: 1; transform: translateY(0); pointer-events: auto; }pointer-events: none这一行很关键。卡片在没有激活时不能接收鼠标事件否则鼠标从列表项移动到卡片区域时会触发卡片的mouseenter从而影响我们的开关逻辑。动画结束后要记得把pointer-events切换为auto不然卡片内部的链接无法点击。我通常会在开发模式里打开 Vue DevTools 中的性能分析标签录制一段快速滑动的节流方案观察是否出现连续的紫色高亮帧。如果出现就是渲染瓶颈信号再逐步排查是什么样式触发了重排。4.4 生产构建与 nginx 部署一个最小可用的配置很多仿站项目做完就停在npm run dev这一步但部署一次会更完整。先用 Vite 的构建命令产出静态文件npm run build构建产物会输出到dist/目录。接下来在 nginx 里配置静态站点和路由回退server { listen 80; server_name douban.example.com; root /var/www/douban-clone/dist; index index.html; location / { try_files $uri $uri/ /index.html; } location ~* \.(?:js|css|png|jpg|jpeg|gif|svg|webp)$ { expires 7d; add_header Cache-Control public, max-age604800; } gzip on; gzip_types text/plain text/css application/javascript application/json image/svgxml; }try_files回退到index.html是 Vue Router 的 history 模式要求的否则刷新二级路由会报 404。正则location里匹配到了静态资源后缀就设置 7 天的浏览器缓存分值较大的 js/css 文件在打包时自带 hash所以长缓存不会导致发版后用户拿到旧文件。gzip配置对文本文件的压缩收益非常大尤其豆瓣官网这种信息类页面正文是大量重复出现的标签名压缩率通常在 70% 以上。5. 仿豆瓣官网的验收清单用 Lighthouse 和组件冒烟测试做收尾5.1 Lighthouse 性能预算四项指标卡在哪仿站做完不要急着收工先用 Lighthouse 跑一遍桌面端性能重点看四个指标指标目标值不达标时的排查方向First Contentful Paint 1.2s是否引入了大型依赖、CSS 是否被拆分Largest Contentful Paint 2.0s首屏图片是否全部走懒加载、是否有大体积 base64Total Blocking Time 150ms第三方字体、同步 script 或低效的 IntersectionObserverCumulative Layout Shift 0.1图片和卡片容器是否正确声明宽高或 aspect-ratio我在做豆瓣官网仿站时Largest Contentful Paint 最容易出问题。原因通常是首屏里的榜单封面图使用了原图没有做尺寸压缩。最简单的做法是在 mock 数据里把图片地址换成一张400x533的占位图或者用工具把本地图等比压缩到 200KB 以内。5.2 组件冒烟测试至少写一个评分组件的单测仿站这种偏展示的项目很多开发者不写测试但面试时如果主动展示一个简单的组件测试会明显拉开和其他候选人的差距。评分组件是最适合测试的我用 Vitest 写两个用例import { describe, it, expect } from vitest; import { getStarClass, formatScore } from ../utils/rating; describe(getStarClass, () { it(8.3 分应输出四星半, () { const classes [0, 1, 2, 3, 4].map((i) getStarClass(8.3, i)); expect(classes).toEqual([ star--full, star--full, star--full, star--full, star--half ]); }); it(9.0 分应输出五颗满星, () { const classes [0, 1, 2, 3, 4].map((i) getStarClass(9.0, i)); expect(classes).toEqual([ star--full, star--full, star--full, star--full, star--full ]); }); it(formatScore 保留一位小数, () { expect(formatScore(8)).toBe(8.0); expect(formatScore(7.85)).toBe(7.8); }); });formatScore(7.85)的结果在 JavaScript 里可能会因为浮点误差变成7.9但toFixed(1)的行为是按标准四舍五入的实测为7.8或7.9取决于引擎如果你的 mock 数据不需要这种边界值测试用例里写一个更稳定的值比如formatScore(8.04)应等于8.0。这反而会让面试官看到你了解浮点数的坑。5.3 和“前端面试八股文”里最大的不同从真实接口字段反推类型仿豆瓣官网这类项目在面试中被问到的多半是“项目难点是什么”。与其背一堆响应式布局概念不如直接给面试官看一条真实链路豆瓣返回的数据是“分类 条目列表”的结构条目里评分字段是字符串不是数字你在 TypeScript 里如果定义为number运行时就会出现toFixed报错。解决办法是接口层做一个字段归一化export function normalizeBookList(rawList: RawBook[]): BookItem[] { return rawList.map((raw) ({ ...raw, score: typeof raw.score string ? parseFloat(raw.score) : raw.score })); }这个归一化函数放在api/层而不是组件里是仿站项目值得写的一个细节。它让组件层永远拿到的是结构稳定的数据同时保留了对后端字段变化的兜底。写进简历里比写“熟练使用 Vue、React”要具体得多。本文还有配套的精品资源点击获取 仿豆瓣官网前端开发实战：Vue3+TypeScript组件化与性能优化
简介面向前端新手的豆瓣官网仿站项目以HTML、CSS与JavaScript为核心技术完整还原豆瓣首页的页面布局、视觉风格与基础交互。项目涉及HTML语义化标签、盒模型与浮动、弹性盒与网格布局、媒体查询响应式设计、DOM节点操作、事件绑定与异步数据请求等知识点适合学完前端基础后用来串联知识、积累实战经验。压缩包共194个文件约88.96MB主要包含HTML页面、CSS样式表、JavaScript脚本、演示视频、图片素材、字体图标文件及说明文档同时含有版本管理元数据便于查看项目演变与提交记录。目前已有672人学习下载。项目中包含可运行的仿豆瓣首页源码及图片、字体、视频等静态资源打开网页文件即可查看页面效果通过阅读和修改样式与脚本可以直观理解真实网站的切图、布局、交互与联调流程对准备前端实习或完成课程设计都有参考价值。1. 仿豆瓣官网到底在仿什么核心分离式布局与信息密度很多人第一次打开豆瓣官网第一反应是“这网站怎么这么老气”。但真正动手用前端去仿豆瓣官网时你会发现这个“老气”才是最大的难点顶部导航要压得住整站信息左侧书影音入口要足够窄却不挤右侧榜单和热门内容要在一个栏位里塞下评分、标题、简介和操作按钮同时还不能乱。豆瓣官网前端的本质不是高复杂度交互而是高信息密度下的克制布局以及一套能支撑内容分类的组件化体系。仿它的价值在于你能用一套真实的产品逻辑去练习布局拆分、组件抽象、异步状态管理和性能基线而不是再做一遍“响应式后台管理模板”。这篇文章我会按自己接这类仿站需求时的做法把从工程骨架到组件实现再到上线前验证的完整路径讲清楚适合准备前端面试作品或想系统练一遍中后台以外内容型站点的人。2. 仿豆瓣官网的工程骨架选型、目录结构与设计令牌2.1 为什么选 Vue3 Vite TypeScript 而不是直接 Next.js仿豆瓣官网是一个纯前端展示型项目页面是内容聚合与列表跳转没有强烈的 SSR 或 SEO 诉求。如果直接上 Next.js反而要处理数据获取方式和运行时开销偏离了“仿”这个目标。我一般会用 Vite 5 Vue 3 组合式 API TypeScript理由有三个第一Vite 的开发服务器冷启动和热更新在内容型页面里体感最轻改一个 CSS 变量能毫秒级看到效果第二豆瓣官网的模块大多是“数据进来、组件渲染”组合式函数比 class 组件更容易组织第三TypeScript 能在写 mock 数据和接口定义时提前卡住字段拼写错误这是仿站项目里最常见的低级 bug 来源。工程初始化用官方脚手架Node 版本建议 18 以上命令如下npm create vitelatest douban-clone -- --template vue-ts cd douban-clone npm install npm run dev项目初始目录里只有src/components和src/App.vue这对仿豆瓣官网不够用。我一般会重建目录结构让它按“领域”而不是按“文件类型”组织src/ ├── api/ # 接口定义与 mock 数据入口 ├── assets/ # 静态资源只放站点级 logo 与字体 ├── components/ # 跨页面通用组件如 RatingStars、HoverCard ├── layouts/ # 顶部导航、左右分栏布局组件 ├── modules/ # 按业务域拆分的页面模块 │ ├── book/ # 图书榜、图书条目 │ ├── movie/ # 电影榜、正在热映 │ └── music/ # 音乐推荐 ├── styles/ # 设计令牌、reset、全局工具类 ├── types/ # 各领域的 TypeScript 类型定义 └── utils/ # 请求封装、懒加载工具这样划分的好处是日后如果有人把 mock 接口换成真实后端你只需要改api/目录不用动任何业务组件。豆瓣官网虽然看似是单页但内容域非常清晰图书、电影、音乐三块的列表结构和评分展示几乎一样按领域组织能大幅减少重复代码。2.2 设计令牌豆瓣官网的配色与字号先做成 CSS 变量仿站的第一步不是写布局而是把视觉规范抽成变量。豆瓣官网的主色是绿色但不是那种高饱和的绿而是一种带点灰调的豆绿。顶部导航的背景、选中态、链接 hover 态各有不同的绿。如果直接在组件里写十六进制颜色后续调整会非常痛苦。我会先用 CSS 变量把颜色、字体、间距、圆角全部定义为设计令牌:root { /* 主色与功能色 */ --db-primary: #2e963d; --db-primary-hover: #268a34; --db-primary-light: #e8f5e9; --db-accent-orange: #ffa42e; --db-accent-red: #de5a55; /* 文本层级 */ --db-text-title: #111111; --db-text-body: #444444; --db-text-secondary: #999999; /* 布局与间距 */ --db-header-height: 48px; --db-content-width: 1200px; --db-gap: 16px; /* 字号系统 */ --db-font-size-xs: 12px; --db-font-size-sm: 13px; --db-font-size-md: 14px; --db-font-size-lg: 16px; }设计令牌要写到styles/tokens.css里并在入口文件一次性引入。豆瓣官网的正文默认字号是 12 到 14 像素比现在的后台类项目要小这也是它“信息密度大”的来源。做这个仿站时一定不要为了“现代感”把字号整体调大否则页面宽度和行数全都会变。间距上豆瓣官网大量使用 8 的倍数列表项间距通常 12 到 16 像素左右分栏的间距固定为 18 像素左右。把这些值抽成变量后面写各模块时能保持视觉节奏一致。2.3 布局组件顶部导航 左侧入口 右侧内容的三栏定宽豆瓣官网最稳定的视觉特征是顶栏和左侧竖排的分类入口。顶栏在滚动时固定左侧块是一个独立的栏目容器右侧内容区根据路由切换。这个结构我用三个组件来表达SiteHeader.vue、SideNav.vue和ContentView.vue。先看布局层级的核心代码template div classdb-layout SiteHeader / div classdb-layout__body aside classdb-layout__side SideNav / /aside main classdb-layout__content RouterView / /main /div /div /template style scoped .db-layout { min-height: 100vh; background: #f7f7f5; } .db-layout__body { width: var(--db-content-width); margin: 0 auto; display: flex; gap: var(--db-gap); padding-top: var(--db-gap); } .db-layout__side { flex: 0 0 130px; } .db-layout__content { flex: 1; min-width: 0; } /styleflex: 0 0 130px这行很关键它保证了左侧栏不会因为内容多少而伸缩。min-width: 0加在内容区是为了防止右侧内容里的长英文文本或过渡动画把布局撑破。豆瓣官网的顶栏背景是白色底部有一条1px的浅灰边框滚动时加一个阴影。这里有个容易被忽略的细节官方顶栏的链接不是普通 hover 变色的而是有一个“选中下划线 浅色背景块”的双重状态仿的时候要把这两个状态一起做出来否则一眼就很“假”。3. 仿豆瓣官网的核心模块榜单列表、评分组件与悬浮卡片3.1 评分组件先做计算函数再写 Vue 模板豆瓣官网的评分不是一个简单数字而是星星加数字的组合且数字保留一位小数。图书和电影模块里的评分展示样式几乎一致只有 hover 时的操作按钮不同。这个组件必须抽象出来我在项目里给它起了个名叫RatingStars.vue同时配套一个纯函数getStarClass。先写评分计算逻辑单独放到utils/rating.tsexport const MAX_STAR 5; export function getStarClass(score: number, index: number): string { const rounded Math.round(score * 2) / 2; const base index 1; if (rounded base) { return star--full; } if (rounded base - 0.5) { return star--half; } return star--empty; } export function formatScore(score: number): string { return score.toFixed(1); }逻辑说明豆瓣显示的是“半星”体系比如 8.3 分在视觉上会显示为四个满星、一个半星。用Math.round(score * 2) / 2把分数对齐到 0.5 的倍数再逐个星星比较。最后一颗星若落在base - 0.5就显示半星。这样做的好处是模板里不需要再做任何判断只需要循环五个索引并把结果作为 class 名。组件模板如下template span classrating-stars :aria-label评分 ${formatScore(score)} i v-foridx in 5 :keyidx classrating-stars__item :classgetStarClass(score, idx - 1) / em classrating-stars__score{{ formatScore(score) }}/em /span /template script setup langts const props defineProps{ score: number }(); /script注意这里的v-foridx in 5中的idx是从 1 开始的所以传给getStarClass时要用idx - 1。每个星星用i元素承载避免占用多余的语义标签。数字用em而不是span因为豆瓣官网的评分数字在视觉上是斜体风格使用em可以减少一个类名。半星效果我会在组件样式里用background: linear-gradient(to right, var(--db-accent-orange) 50%, #e3e3e3 50%)来实现比使用两个二维码图片更轻。3.2 榜单模块的列表结构数据数组 迭代渲染 空状态兜底榜单是豆瓣官网首页占比最大的信息块。以图书榜单为例每个条目有排名、封面、标题、作者、出版社、评分和一句简介。真正的豆瓣官网首页有多个榜单每个榜单的条目数不等有的 10 条有的 20 条。仿站时不需要做那么多数据但结构要一致。我建议在modules/book/BookRank.vue里写一个可复用的榜单组件通过 props 传入标题和数据。数据侧的类型定义放在types/book.tsexport interface BookItem { id: string; title: string; author: string; publisher: string; pubYear: string; score: number; cover: string; summary: string; }榜单数据我放到api/mock/books.ts里只准备 10 条左右。注意 mock 数据的封面图不要用豆瓣的图片链接因为盗链和跨域问题都会让仿站项目变得不稳定。稳妥的做法是在项目public/covers/下放几张本地生成的纯色占位图或者用 CSS 渐变替代封面。模板的渲染逻辑ol classbook-rank-list li v-for(item, index) in items :keyitem.id classbook-rank-list__item span classbook-rank-list__index{{ index 1 }}/span div classbook-rank-list__cover img :srcitem.cover :altitem.title loadinglazy / /div div classbook-rank-list__info h4{{ item.title }}/h4 p{{ item.author }} / {{ item.publisher }}/p RatingStars :scoreitem.score / /div /li /ol这里有一个仿豆瓣必须注意的细节榜单序号前三名要用醒目的橙色或红色标识后面的名次用灰色。不要用数组索引直接渲染时加特殊逻辑我推荐在组件内加一个计算属性rankClass(index)返回 “top1” 或 “normal”避免v-if堆在模板里。空状态兜底也很重要豆瓣官网在断网或接口异常时会展示一个简单的“暂时无法加载”。我写的榜单组件会加v-ifitems.length和div classempty两套分支这能让整个仿站在弱网条件下看起来像正经产品。3.3 悬浮卡片鼠标移入时加载预览内容豆瓣官网一个标志性交互是鼠标移动到某本书或某部电影条目上时会弹出一个预览卡片卡片里包含封面、简介、评分和“想看 / 在看 / 看过”操作按钮。这个交互在移动端不存在所以只在桌面端实现即可。悬浮卡片不能每 hover 一个条目就立刻请求接口那样会频繁发送网络请求。常见做法是“移入后等待 300 毫秒如果还停留在当前条目上才请求数据”。我用自己的组合式函数useHoverCard来实现这个逻辑import { ref } from vue; export function useHoverCard(delay 300) { const loading ref(false); const visible ref(false); let timer: ReturnTypetypeof setTimeout | null null; function onEnter() { timer setTimeout(() { visible.value true; loading.value true; }, delay); } function onLeave() { if (timer) { clearTimeout(timer); } visible.value false; loading.value false; } return { loading, visible, onEnter, onLeave }; }useHoverCard返回的onEnter和onLeave绑定到列表条目的mouseenter与mouseleave。卡片组件的定位使用绝对定位它的容器要有position: relative同时卡片层级要设为 100 以上避免被其他内容遮挡。豆瓣官网的悬浮卡位置会根据条目所在列自动调整但这个细节可以留到后面优化第一版固定为“在条目右侧显示”即可。要注意的是卡片弹出后鼠标从条目移动到卡片上mouseleave会触发展开组件的关闭逻辑所以卡片的容器必须放在条目标签内部或者在卡片的mouseenter里清除关闭定时器。3.4 真实异步与假数据为什么仿站也要写请求层很多仿站教程把数据直接写在组件里页面能看但没有任何工程价值。豆瓣官网的数据原本来自接口做仿站时虽然用的是 mock 数据也应该走一遍“接口定义 - 请求函数 - 状态管理”的链路。这一步的价值在于你换真实后端时不需要改动组件代码。我在api/request.ts里写了一个极简的请求封装export async function getMockDataT(data: T, delay 200): PromiseT { return new Promise((resolve) { setTimeout(() resolve(structuredClone(data)), delay); }); }structuredClone是替代JSON.parse(JSON.stringify())的安全深拷贝方案在 Node 18 和现代浏览器里都可用。请求函数写在api/rank.tsimport { getMockData } from ./request; import { mockBookList } from ./mock/books; export function fetchBookRank() { return getMockData(mockBookList, 300); }真实豆瓣接口返回的 JSON 字段名是title、author、summary之类的英文缩写所以 mock 数据字段要与之一致。页面组件里通过onMounted调用请求函数用ref接收数据。这一套流程走下来日后把getMockData换成fetch(/api/rank)并做类型断言迁移成本几乎为零。4. 仿豆瓣官网的性能基线图片、接口与动画的量化目标4.1 图片懒加载与占位策略不要一次加载 200 张封面豆瓣官网的榜单页面图片非常多如果不做懒加载首屏体积会直接爆掉。Vue 3 里最简单的懒加载方案是使用浏览器原生的loadinglazy属性我在第 3 章的榜单模板里已经用上了。但原生懒加载对首屏图片不生效首屏内距离视口较近的图片还是会被立即加载所以需要在项目中加一个自定义指令v-lazy用于延迟加载首屏之外的图片。自定义指令实现如下import type { Directive } from vue; const lazyDirective: DirectiveHTMLImageElement, string { mounted(el, binding) { const observer new IntersectionObserver( (entries) { for (const entry of entries) { if (entry.isIntersecting) { el.src binding.value; observer.disconnect(); } } }, { rootMargin: 200px } ); observer.observe(el); } };使用方式是在img上不写src只写v-lazyitem.cover。注意此时img需要一个初始占位背景我一般会设置一个灰色背景类placeholder或者用一个非常小的base64透明图。rootMargin: 200px的作用是让图片在距离视口还有 200 像素时就开始加载避免滚动到跟前时出现白屏闪烁。还有一个更激进的优化豆瓣官网的封面图是固定尺寸比例约 3:4。所有封面容器都应该提前声明aspect-ratio: 3 / 4这样懒加载期间布局高度不会跳动防止页面出现滚动条抖动的现象。4.2 接口请求合并与节流榜单页的 3 个并发请求控制仿站首页会同时请求图书榜、电影榜、音乐榜三个接口如果不加控制每次路由进入都会发出 3 到 5 个请求。本地 mock 接口虽然不慢但真实接口环境下并发请求多会造成页面白屏时间边长。常见做法是使用Promise.all并行请求然后统一进入 loading 状态。import { ref } from vue; import { fetchBookRank, fetchMovieRank, fetchMusicRank } from ../api/rank; const loading ref(true); const bookItems ref([]); const movieItems ref([]); const musicItems ref([]); async function loadAllRanks() { loading.value true; try { const [book, movie, music] await Promise.all([ fetchBookRank(), fetchMovieRank(), fetchMusicRank() ]); bookItems.value book; movieItems.value movie; musicItems.value music; } finally { loading.value false; } } loadAllRanks();Promise.all有一个缺点三个接口中最慢的那个决定了整个页面的展示时间。如果 mock 接口返回时间差异明显我建议使用Promise.allSettled替代这样单个接口失败不影响另外两个榜单展示同时配合一个“重试单模块”的按钮。对仿站来说这个细节可以在和面试官描述时作为“容错处理”的亮点。4.3 hover 卡片的动画性能只用 transform 与 opacity榜单条的 hover 卡片如果使用left/top属性控制移动会导致重排在快速滑过列表时帧率可能掉到 30fps。正确做法是卡片先以opacity: 0和transform: translateY(8px)隐藏鼠标移入后改变这两个属性。CSS 过渡只写在条件类上.hover-card { position: absolute; z-index: 100; left: 140px; top: 0; width: 280px; opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; } .hover-card--active { opacity: 1; transform: translateY(0); pointer-events: auto; }pointer-events: none这一行很关键。卡片在没有激活时不能接收鼠标事件否则鼠标从列表项移动到卡片区域时会触发卡片的mouseenter从而影响我们的开关逻辑。动画结束后要记得把pointer-events切换为auto不然卡片内部的链接无法点击。我通常会在开发模式里打开 Vue DevTools 中的性能分析标签录制一段快速滑动的节流方案观察是否出现连续的紫色高亮帧。如果出现就是渲染瓶颈信号再逐步排查是什么样式触发了重排。4.4 生产构建与 nginx 部署一个最小可用的配置很多仿站项目做完就停在npm run dev这一步但部署一次会更完整。先用 Vite 的构建命令产出静态文件npm run build构建产物会输出到dist/目录。接下来在 nginx 里配置静态站点和路由回退server { listen 80; server_name douban.example.com; root /var/www/douban-clone/dist; index index.html; location / { try_files $uri $uri/ /index.html; } location ~* \.(?:js|css|png|jpg|jpeg|gif|svg|webp)$ { expires 7d; add_header Cache-Control public, max-age604800; } gzip on; gzip_types text/plain text/css application/javascript application/json image/svgxml; }try_files回退到index.html是 Vue Router 的 history 模式要求的否则刷新二级路由会报 404。正则location里匹配到了静态资源后缀就设置 7 天的浏览器缓存分值较大的 js/css 文件在打包时自带 hash所以长缓存不会导致发版后用户拿到旧文件。gzip配置对文本文件的压缩收益非常大尤其豆瓣官网这种信息类页面正文是大量重复出现的标签名压缩率通常在 70% 以上。5. 仿豆瓣官网的验收清单用 Lighthouse 和组件冒烟测试做收尾5.1 Lighthouse 性能预算四项指标卡在哪仿站做完不要急着收工先用 Lighthouse 跑一遍桌面端性能重点看四个指标指标目标值不达标时的排查方向First Contentful Paint 1.2s是否引入了大型依赖、CSS 是否被拆分Largest Contentful Paint 2.0s首屏图片是否全部走懒加载、是否有大体积 base64Total Blocking Time 150ms第三方字体、同步 script 或低效的 IntersectionObserverCumulative Layout Shift 0.1图片和卡片容器是否正确声明宽高或 aspect-ratio我在做豆瓣官网仿站时Largest Contentful Paint 最容易出问题。原因通常是首屏里的榜单封面图使用了原图没有做尺寸压缩。最简单的做法是在 mock 数据里把图片地址换成一张400x533的占位图或者用工具把本地图等比压缩到 200KB 以内。5.2 组件冒烟测试至少写一个评分组件的单测仿站这种偏展示的项目很多开发者不写测试但面试时如果主动展示一个简单的组件测试会明显拉开和其他候选人的差距。评分组件是最适合测试的我用 Vitest 写两个用例import { describe, it, expect } from vitest; import { getStarClass, formatScore } from ../utils/rating; describe(getStarClass, () { it(8.3 分应输出四星半, () { const classes [0, 1, 2, 3, 4].map((i) getStarClass(8.3, i)); expect(classes).toEqual([ star--full, star--full, star--full, star--full, star--half ]); }); it(9.0 分应输出五颗满星, () { const classes [0, 1, 2, 3, 4].map((i) getStarClass(9.0, i)); expect(classes).toEqual([ star--full, star--full, star--full, star--full, star--full ]); }); it(formatScore 保留一位小数, () { expect(formatScore(8)).toBe(8.0); expect(formatScore(7.85)).toBe(7.8); }); });formatScore(7.85)的结果在 JavaScript 里可能会因为浮点误差变成7.9但toFixed(1)的行为是按标准四舍五入的实测为7.8或7.9取决于引擎如果你的 mock 数据不需要这种边界值测试用例里写一个更稳定的值比如formatScore(8.04)应等于8.0。这反而会让面试官看到你了解浮点数的坑。5.3 和“前端面试八股文”里最大的不同从真实接口字段反推类型仿豆瓣官网这类项目在面试中被问到的多半是“项目难点是什么”。与其背一堆响应式布局概念不如直接给面试官看一条真实链路豆瓣返回的数据是“分类 条目列表”的结构条目里评分字段是字符串不是数字你在 TypeScript 里如果定义为number运行时就会出现toFixed报错。解决办法是接口层做一个字段归一化export function normalizeBookList(rawList: RawBook[]): BookItem[] { return rawList.map((raw) ({ ...raw, score: typeof raw.score string ? parseFloat(raw.score) : raw.score })); }这个归一化函数放在api/层而不是组件里是仿站项目值得写的一个细节。它让组件层永远拿到的是结构稳定的数据同时保留了对后端字段变化的兜底。写进简历里比写“熟练使用 Vue、React”要具体得多。本文还有配套的精品资源点击获取