Vue 资深开发 → Web3 DApp 前端工程师（能写合约）
16 周 Web3 转型学习计划 v2.1
前端为主线 + Solidity 为辅助 + 英语同步提升。目标定位："能写合约、能用英文沟通的 Web3 前端"。前 8 周每天 1-2 小时，后 8 周每天 4+ 小时。每周配有英文阅读材料，边学技术边练英语。
📝 v2.1 更新说明（相比 v2.0）
- 每周卡片新增「本周英文阅读」板块，配有 3-5 个精选链接，跟着学习进度同步练英文阅读
- 新增口语提升策略模块，分三阶段制定务实的口语训练方案
- Week 14 面试准备增加英文自我介绍和项目描述的准备任务
- 资源区新增英语学习专区（技术博客、YouTube 频道、口语练习平台）
- 含英文阅读任务的周卡右侧标有蓝色边框，便于识别
- 所有 v2.0 的 Solidity 增强内容保留不变（橙色边框标记）
🎯 核心策略：前端主线 + Solidity 辅线
不做"纯 Solidity 开发"——那个方向入门门槛太高（岗位普遍要求 2 年以上生产合约经验），3-4 个月达不到。而是把 Solidity 作为前端的差异化武器，让你在前端岗位面试中脱颖而出。
前端主线 · 约 70% 时间
React + Next.js + Wagmi + Viem + RainbowKit，做 4-5 个可部署的 DApp 项目，这是你拿到面试的核心竞争力
Solidity 辅线 · 约 30% 时间
能自主编写 ERC-20 / ERC-721 合约，会用 Hardhat/Foundry 测试部署，了解常见安全漏洞，面试时能聊合约层面的问题
Week 1
React 核心概念速通
用 React 官方文档（react.dev）过一遍核心：JSX、组件、Props、State。你有 Vue 基础，重点理解 React 的单向数据流和 Vue 双向绑定的差异
掌握核心 Hooks：useState useEffect useRef useMemo useCallback，对比 Vue 的 ref / computed / watch 加深理解
用 Vite 创建一个 React + TypeScript 项目，写一个简单的 Todo 应用练手
📖 本周英文阅读
React 官方教程（直接读英文版，强迫自己别切中文）react.dev/learn
Josh Comeau — 写给初学者的 React 指南，语言极其友好 Common Beginner Mistakes
Dan Abramov — A Complete Guide to useEffect，经典长文 overreacted.io
Kent C. Dodds — How React Hooks Work React Hooks Pitfalls
Week 2
React 生态 + Next.js 入门
学习 React Router 或直接进入 Next.js App Router（Web3 项目主流选择），理解 SSR/CSR 的区别
学习状态管理：useContext + useReducer，了解 Zustand（轻量替代 Pinia/Vuex）
安装 Tailwind CSS + Shadcn/UI，用它们重构 Week1 的 Todo 项目，熟悉 React 的样式方案
📖 本周英文阅读
Next.js 官方交互教程（英文，边做边学）nextjs.org/learn
Lee Robinson — Next.js App Router 最佳实践 leerob.io
Tailwind CSS 官方文档（写得非常清晰）tailwindcss.com/docs
Shadcn/UI 文档和组件源码 ui.shadcn.com
Week 3
区块链基础认知
理解区块链核心概念：区块、链、共识机制（PoW/PoS）、公钥/私钥、钱包地址、Gas 费、交易签名
安装 MetaMask 钱包，在测试网（Sepolia）领取测试币，实际操作几笔转账，体验完整交易流程
了解以太坊生态：EVM、智能合约是什么、DeFi/NFT/DAO 基本概念。推荐看 Ethereum.org 官方教程
下载并使用 3-5 个主流 DApp（Uniswap、OpenSea、Aave 等），以用户视角理解交互流程
📖 本周英文阅读
以太坊官方开发者教程（英文，这是你最重要的 Web3 入门文档）ethereum.org/developers
Nader Dabit — The Complete Guide to Full Stack Web3 Development dev.to/dabit3
Preethi Kasireddy — How Does Ethereum Work Anyway? preethikasireddy.com
YouTube — Whiteboard Crypto 频道（动画讲解区块链概念，语速慢，练听力入门）@WhiteboardCrypto
Week 4 UPDATED
Solidity 深入学习 + 开发工具链 Solidity
用 Remix IDE 学 Solidity 基础语法：变量类型（uint/address/mapping）、函数、修饰符（modifier）、事件（event）、错误处理（require/revert）
通关 CryptoZombies 全部课程（约 6-8 小时）——这是最高效的 Solidity 入门方式，游戏化边学边写，覆盖 struct、mapping、继承、接口等核心概念
精读 ERC-20 标准完整代码（用 OpenZeppelin 实现），理解 transfer approve transferFrom allowance 的完整机制
精读 ERC-721 标准完整代码，理解 mint tokenURI ownerOf 等核心方法
在 Remix 中自己动手写一个简单的 ERC-20 代币合约，部署到 Sepolia 测试网，理解"编写→编译→部署→调用"完整流程
📖 本周英文阅读
Solidity 官方文档（英文，至少读 Introduction 和 Solidity by Example 章节）docs.soliditylang.org
OpenZeppelin — ERC-20 合约源码与文档 docs.openzeppelin.com
Solidity by Example — 每个例子短小精悍，代码+英文解释 solidity-by-example.org
YouTube — Patrick Collins 的 Solidity 教程（语速适中，最受欢迎的 Solidity 教学频道）@PatrickAlphaC
阶段交付：能用 React + Next.js 写基本页面，通关 CryptoZombies，能独立编写简单的 ERC-20 合约
Week 5
Viem + Ethers.js — 链上交互基础
学习 Viem（2026 行业首选的 TypeScript 以太坊库）：创建 PublicClient，读取链上数据（余额、区块号、合约状态）
理解 ABI 编码/解码，用 Viem 调用你在 Week4 部署的 ERC-20 合约，读取 balanceOf、totalSupply
顺带了解 ethers.js，很多老项目还在用，面试可能会问到两者的区别
📖 本周英文阅读
Viem 官方文档（从此开始所有工具文档都读英文原版）viem.sh
Ethers.js v6 文档（了解与 Viem 的对比）docs.ethers.org
Viem 作者 Jake 的介绍文章 — Why Viem viem.sh/docs/introduction
Week 6
Wagmi + RainbowKit — 钱包连接与合约交互
用 Wagmi（React Hooks for Ethereum）搭配 Next.js：useAccount useBalance useReadContract useWriteContract
集成 RainbowKit 实现钱包连接弹窗，支持 MetaMask / WalletConnect 等主流钱包
搭建一个完整的钱包连接页面：连接→显示地址→显示余额→断开。这是最基础的 Web3 前端交互
理解 Wagmi 底层是 Viem + TanStack Query 的封装，学会处理 loading / error / success 状态
📖 本周英文阅读
Wagmi 官方文档（重点读 Getting Started 和 Hooks 章节）wagmi.sh
RainbowKit 官方文档 rainbowkit.com/docs
scaffold-eth-2 README 和文档（优秀的开源项目文档范例）GitHub
YouTube — Nader Dabit 的 Web3 前端教程系列 @naderdabit
Week 7
第一个 DApp 实战：ERC-20 代币仪表盘
项目实战：做一个代币仪表盘 DApp，技术栈 Next.js + Wagmi + RainbowKit + Tailwind
功能：连接钱包 → 显示 ETH 和任意 ERC-20 代币余额 → 代币转账 → 交易状态追踪
重点练习：交易全链路状态反馈（idle → pending → mining → success/error），这是 JD 常考的
部署到 Vercel，开始积累你的 GitHub 项目作品集
Week 8 UPDATED
第二个 DApp：自己写合约 + NFT Mint 页面 Solidity
安装 Hardhat 开发环境，学习项目结构：contracts / scripts / test 目录
自己从头编写一个 ERC-721 合约（不是复制粘贴）：继承 OpenZeppelin、实现 mint 函数、设置 tokenURI、添加 maxSupply 限制
用 Hardhat 写测试脚本（用 JavaScript/TypeScript），学会 npx hardhat test 跑测试
部署到 Sepolia 测试网，用 npx hardhat run scripts/deploy.js --network sepolia
写 NFT Mint 前端页面：展示 NFT 图片 → 连接钱包 → Mint → 展示铸造结果 → 查看已铸造数量
学习 IPFS 存储元数据（Pinata），做好 UI/UX：响应式布局、Mint 进度动画、错误提示
📖 本周英文阅读
Hardhat 官方教程 hardhat.org/tutorial
OpenZeppelin — ERC-721 文档与教程 docs.openzeppelin.com/erc721
Pinata IPFS 文档 docs.pinata.cloud
Alchemy — How to Create an NFT（完整英文教程）docs.alchemy.com
阶段交付：GitHub 上有 2 个可运行的 DApp 项目，其中 NFT 项目是自己写的合约 + 自己写的前端
Week 9
DeFi 前端实战：Token Swap 界面
做一个仿 Uniswap 的 Token Swap 前端（可以对接测试网 DEX 合约或 mock 数据）
学习 multicall 批量读取链上数据，优化 RPC 请求次数
处理代币 Approve → Swap 的两步交易流程，学习 allowance 机制
实现实时价格更新、滑点设置等 DeFi 常见交互
Week 10 NEW
Solidity 专项周：Foundry + Gas 优化 + 安全攻防 Solidity
学习 Foundry 框架（行业正在从 Hardhat 转向 Foundry）：forge init 创建项目，forge build 编译，forge test 测试——Foundry 的测试也是用 Solidity 写的，进一步加深语言掌握
Gas 优化基础：理解 storage vs memory vs calldata 的 Gas 开销差异，学会用 forge test --gas-report 分析 Gas 消耗，掌握常见优化技巧（变量打包、使用 uint256、避免重复读取 storage）
安全漏洞实战：完成 Ethernaut（OpenZeppelin 出品的 CTF 挑战）前 10 关——亲手利用重入攻击（Reentrancy）、整数溢出、tx.origin 钓鱼等经典漏洞
学习安全最佳实践：Checks-Effects-Interactions 模式、ReentrancyGuard、Access Control（Ownable / Role）
了解代理合约模式（Proxy Pattern）：透明代理 vs UUPS，理解为什么合约需要可升级以及升级的风险
📖 本周英文阅读
Foundry Book 官方文档 book.getfoundry.sh
Ethernaut 挑战官网（边做边读英文题目描述）ethernaut.openzeppelin.com
OpenZeppelin — Proxy Patterns 解析 blog.openzeppelin.com
SWC Registry — 智能合约弱点分类（安全漏洞参考，英文）swcregistry.io
YouTube — Smart Contract Programmer（Solidity 安全专题）@smartcontractprogrammer
Week 11 UPDATED
全栈 DApp 项目：自写 Staking 合约 + 前端 Solidity
核心项目：自己编写一个 Token Staking（质押）合约——用户存入 ERC-20 代币，按时间获得奖励，可随时提取。这是 DeFi 最基础的原语之一
合约功能：stake() 质押、withdraw() 提取、claimReward() 领取奖励、getEarned() 计算收益。用 Foundry 写完整测试
写配套前端：连接钱包 → 显示质押数据 → Approve + Stake 两步流程 → 实时显示累计奖励 → Withdraw
学习 WebSocket / 事件监听：用 Viem 的 watchContractEvent 实时监听 Staked / Withdrawn 事件更新 UI
部署到 Vercel + Sepolia，这个项目将是你简历上最有份量的作品——全栈 DApp，从合约到前端都是自己写的
📖 本周英文阅读
Synthetix Staking 合约源码（学习生产级 Staking 设计）GitHub/Synthetixio
Vitalik Buterin 的博客（选 1-2 篇感兴趣的读，提升行业认知）vitalik.eth.limo
练习用英文描述你的 Staking 项目——写一段 200 字的项目介绍，为面试做准备
Week 12
The Graph + 综合项目：DeFi Dashboard
学习 The Graph 协议：写 Subgraph 索引链上事件，用 GraphQL 查询历史数据
做一个 DeFi 仪表盘，聚合展示用户的质押数据、代币余额、交易历史
技术要点：多链支持（Ethereum + Polygon/Arbitrum）、数据可视化（Recharts）、骨架屏
移动端适配（Web3 JD 普遍要求），确保钱包连接在手机端也能正常工作
📖 本周英文阅读
The Graph 官方文档 thegraph.com/docs
Alchemy — Multichain DApp Development Guide docs.alchemy.com
Paradigm 研究博客（选读 1 篇，了解行业前沿）paradigm.xyz/writing
Week 13
安全意识 + 代码质量 + 开源贡献
前端安全：防范 XSS 攻击、钱包签名钓鱼、恶意合约交互。了解 EIP-712 签名验证
代码质量：用 ESLint + Prettier 规范代码，写单元测试（Vitest），学会用 TypeScript 严格模式
找 1-2 个 开源 Web3 项目（如 scaffold-eth-2）提交 PR：修 bug、补文档、加测试都行
完善 GitHub profile，给每个项目写好 README（英文），配上截图和演示链接
📖 本周英文阅读
Trail of Bits — Building Secure Smart Contracts blog.trailofbits.com
Samczsun 安全博客（Web3 顶级安全研究者）samczsun.com
练习：用英文写一篇你的 Ethernaut 通关笔记，发到 Mirror 或 Medium
阶段交付：GitHub 上有 5-6 个项目（含 1 个全栈 DApp）+ 开源贡献记录 + Ethernaut 通关截图
Week 14 UPDATED
简历打磨 + 面试题库（含 Solidity） Solidity
重写简历：突出"能写合约的 Web3 前端"定位，强调全栈 DApp 项目经验
准备前端高频面试题：React Hooks 原理、Wagmi 工作流、钱包连接流程、交易生命周期
准备 Solidity 面试题：什么是重入攻击？如何防范？ storage 和 memory 的区别？ ERC-20 的 approve + transferFrom 为什么要分两步？ delegatecall 和 call 的区别？
合约手写题练习：给你一个需求（如简单拍卖、投票合约），现场用 Solidity 写出来。每天练 1-2 道
准备英文自我介绍（3 分钟版）和 3 个核心项目的英文描述（每个 2 分钟），反复练到流畅
📖 本周英文阅读 + 口语练习
Web3 面试常见英文问答整理 GitHub/web3-interview
用英文回答技术题：录音自己的回答，听一遍，改进后再录。重复 3 次
找口语陪练对练面试场景（闲鱼 30-40 元/节，或用 Cambly / italki 平台）
YouTube — TechLead / Clement Mihailescu（看英文技术面试真题视频，熟悉面试节奏）
Week 15
海投 + 社区曝光
在 web3.career、remote3.co、cryptocurrencyjobs.co、LinkedIn 大量投递，每天 5-10 个岗位
岗位选择策略：优先投"前端 + 会 Solidity 加分"的岗位，其次投纯前端岗位，也可以试投一些要求不高的全栈岗
加入 Web3 开发者社区：Discord（Ethereum、Wagmi）、Twitter/X 关注 Web3 项目方，参与讨论
写 1-2 篇技术博客：分享 Vue 转 React + Web3 的经验，或者分享 Ethernaut 攻略，发到 Mirror/Medium
参加 Web3 Hackathon（如 ETHGlobal），你现在能写合约+前端，可以独立参赛
📖 本周英文阅读
Mirror.xyz 上的英文技术博客（找几篇 Web3 前端经验分享）mirror.xyz
ETHGlobal 往期获奖项目介绍（读英文项目描述，学习如何用英文展示项目）ethglobal.com/showcase
在 Twitter/X 用英文发 1-2 条技术推文，分享你的学习进展，积累行业存在感
Week 16
面试实战 + 查漏补缺
积极面试，把每次面试当作学习机会，记录面试题并查漏补缺
常见编码面试：现场实现钱包连接组件、读取合约数据并渲染、处理交易状态的 React 组件
系统设计题准备：如何设计一个 DEX 前端架构？如何做多链适配？如何优化 DApp 性能？
持续优化项目，根据面试反馈迭代代码质量和功能
📖 本周英文练习
每次面试后用英文写面试复盘笔记，整理不会回答的问题
复习所有项目的英文描述，确保能自然地用英文解释技术决策和架构选择
阶段目标：收到 1-3 个 offer，以"能写合约的 Web3 前端"身份成功入职
🗣 口语提升策略：分阶段务实训练
Web3 远程面试大概率需要英文口语（尤其海外项目）。但不需要流利——能用简单英文把技术讲清楚就行。面试口语 80% 的内容可以提前准备。
Week 1-8 · 输入期
每天读英文文档时，遇到不会的技术词汇记下来。每天用英文自言自语 10 分钟，描述当天学了什么。不用在意语法，重点是敢说出来。
Week 9-13 · 输出期
开始找口语陪练（闲鱼 30-40 元/节，或 Cambly / italki），每周 2-3 次，专练技术场景对话。同时用英文写项目 README 和技术博客。
Week 14-16 · 实战期
背熟 3 分钟英文自我介绍 + 3 个项目介绍。录音→听→改→再录，重复 3 遍。模拟面试练习：让朋友或 AI 扮演面试官用英文提问。
💡 保底策略：如果英语实在来不及，优先投华人团队的远程 Web3 岗位（电鸭社区、Job3.co），日常用中文沟通，英语只需读写能力。入职后再边工作边提升口语。
📚 核心学习资源
React
react.dev 官方文档
最好的 React 学习资料，有 Vue 基础 3-5 天可过完
Next.js
nextjs.org/learn
官方交互式教程，边学边做
Web3 入门
ethereum.org/developers
以太坊官方开发者入门教程
Solidity 入门
CryptoZombies
游戏化学 Solidity，轻松有趣，Week4 必做
Solidity 安全
Ethernaut (ethernaut.openzeppelin.com)
CTF 安全挑战，亲手利用漏洞学安全
Foundry
Foundry Book (book.getfoundry.sh)
Foundry 官方文档，Week10 核心参考
Wagmi
wagmi.sh 官方文档
React Hooks for Ethereum，必读
Viem
viem.sh 官方文档
TypeScript 以太坊客户端，Wagmi 底层
合约库
OpenZeppelin Contracts
行业标准合约库，ERC-20/721 参考实现
实战脚手架
scaffold-eth-2
最佳 DApp 全栈学习模板，Next.js + Wagmi + Hardhat
Solidity 进阶
Solidity by Example
按场景学 Solidity，有大量实用代码示例
求职平台
web3.career / remote3.co
Web3 专业招聘网站，远程岗位为主
英文博客
Josh Comeau / Dan Abramov
joshwcomeau.com / overreacted.io，React 经典英文博客
英文博客
Vitalik / Paradigm / samczsun
Web3 行业顶级英文博客，提升认知和阅读能力
YouTube 练听力
Patrick Collins / Nader Dabit / Finematics
最优质的 Web3 英文教学频道，语速适中
口语练习
Cambly / italki / 闲鱼口语陪练
Cambly 约 $10/节，闲鱼 30-40 元/节，性价比高
华人求职
电鸭社区 / Job3.co
国人 Web3 远程岗位聚集地，英语要求较低的保底选择
💡 关键策略提醒（v2.1 更新）
你的目标定位是"能写合约、能用英文沟通的 Web3 前端"。这在市场上非常稀缺——大多数前端只会调合约，大多数 Solidity 开发不关心 UI，而很多中国开发者卡在英语上。你三项都能做，就是降维打击。
英语不是额外负担，而是内嵌在学习中的。每周的英文阅读材料都跟当周技术内容对应，读技术文档的同时就在练英语。不需要额外花大块时间，日积月累就够了。
口语准备 80% 靠提前背熟。英文自我介绍 + 3 个项目描述 + 10 个高频技术问答，背熟练流利就能应付大部分面试。剩下 20% 靠临场发挥，表达不完美没关系，能把意思讲清楚就行。
投简历策略要分层：华人团队远程岗（电鸭/Job3）作为保底，海外项目（web3.career/remote3）作为冲刺目标。先拿到 offer 再说，入职后再提升英语跳板到更好的岗位。
全栈 DApp 项目是你的王牌。Week 11 的 Staking 项目（自己写合约 + 自己写前端）是简历上最有说服力的作品，好好打磨。
React
Next.js
TypeScript
Tailwind
Wagmi
Viem
RainbowKit
Ethers.js
Solidity
Hardhat
Foundry
OpenZeppelin
The Graph
IPFS
English Reading
English Speaking