react仿网易云音乐项目实践(一)

前言

react +webpack5 + ts 框架搭建专栏学习后,很长时间没有来掘金更新了,今天起正式开始进行项目实践开发!!!

产品:仿网易云音乐demo

前置项

react:react18

打包工具:webpack5

路由:react-router-dom@6.x

UI:antd4.21.7

语言:typescript

node: node14
axioseslintprettier代码规范配置


基础配置

1. Header头部导航

header引入logo图片时,报以上问题: 解决方法:global.d.ts中进行声明

头部导航效果如下: 引入antd-icon图标时一直报:缺少rev属性 解决:antd官网上也有好多人反馈该问题

官网大牛建议:升级@type/react @type/react-dom至最新版本 以上升级之后,又报错: 原因查找:说是由于TS版本与@types/react版本不匹配导致 但是版本一致后仍存在该问题

最终解决: tsconfig.json中添加改配置 最终header效果:

2.待续...

相关链接:github代码地址

相关推荐
Java小卷4 分钟前
流程设计器为啥选择diagram-js
前端·低代码·工作流引擎
HelloReader30 分钟前
Isolation Pattern(隔离模式)在前端与 Core 之间加一道“加密网关”,拦截与校验所有 IPC
前端
兆子龙1 小时前
从 float 到 Flex/Grid:CSS 左右布局简史与「刁钻」布局怎么搞
前端·架构
YukiMori231 小时前
一个有趣的原型继承实验:为什么“男人也会生孩子”?从对象赋值到构造函数继承的完整推演
前端·javascript
_哆啦A梦1 小时前
Vibe Coding 全栈专业名词清单|设计模式·基础篇(创建型+结构型核心名词)
前端·设计模式·vibecoding
百里静修1 小时前
一个 Hook 拦截所有 AJAX 请求:ajax-hooker 使用指南与原理
前端
摸鱼的春哥2 小时前
惊!黑客靠AI把墨西哥政府打穿了,海量数据被黑
前端·javascript·后端
小兵张健2 小时前
Playwright MCP 截图标注方案调研(推荐方案1)
前端·javascript·github
小兵张健3 小时前
AI 页面与交互迁移流程参考
前端·ai编程·mcp
小兵张健3 小时前
掘金发布 SOP(Codex + Playwright MCP + Edge)
前端·mcp