Vue 资深开发 → Web3 DApp 前端工程师（能写合约）
16 周 Web3 转型学习计划 v2.0
前端为主线 + Solidity 为辅助技能。目标定位："能写合约的 Web3 前端"——比纯前端或纯 Solidity 都更稀缺。前 8 周每天 1-2 小时，后 8 周每天 4+ 小时。
📝 v2.0 更新说明（相比 v1）
- Week 4 从"Solidity 入门"升级为"Solidity 深入 + CryptoZombies 通关"
- Week 8 从"用现成合约"改为"自己从头写 ERC-721 合约 + Hardhat 全流程"
- 新增 Week 10 为 Solidity 专项周：Foundry 框架、Gas 优化、安全漏洞实战
- Week 11 的 Swap 项目升级为"自己写合约 + 自己写前端"的全栈 DApp
- 面试准备增加 Solidity 相关面试题和合约手写题
- 新增 Solidity 专项学习资源（Ethernaut、Foundry Book 等）
- 所有含 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 应用练手
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 的样式方案
Week 3
区块链基础认知
理解区块链核心概念：区块、链、共识机制（PoW/PoS）、公钥/私钥、钱包地址、Gas 费、交易签名
安装 MetaMask 钱包，在测试网（Sepolia）领取测试币，实际操作几笔转账，体验完整交易流程
了解以太坊生态：EVM、智能合约是什么、DeFi/NFT/DAO 基本概念。推荐看 Ethereum.org 官方教程
下载并使用 3-5 个主流 DApp（Uniswap、OpenSea、Aave 等），以用户视角理解交互流程
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 测试网，理解"编写→编译→部署→调用"完整流程
阶段交付：能用 React + Next.js 写基本页面，通关 CryptoZombies，能独立编写简单的 ERC-20 合约
Week 5
Viem + Ethers.js — 链上交互基础
学习 Viem（2026 行业首选的 TypeScript 以太坊库）：创建 PublicClient，读取链上数据（余额、区块号、合约状态）
理解 ABI 编码/解码，用 Viem 调用你在 Week4 部署的 ERC-20 合约，读取 balanceOf、totalSupply
顺带了解 ethers.js，很多老项目还在用，面试可能会问到两者的区别
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 状态
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 进度动画、错误提示
阶段交付：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，理解为什么合约需要可升级以及升级的风险
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，从合约到前端都是自己写的
Week 12
The Graph + 综合项目：DeFi Dashboard
学习 The Graph 协议：写 Subgraph 索引链上事件，用 GraphQL 查询历史数据
做一个 DeFi 仪表盘，聚合展示用户的质押数据、代币余额、交易历史
技术要点：多链支持（Ethereum + Polygon/Arbitrum）、数据可视化（Recharts）、骨架屏
移动端适配（Web3 JD 普遍要求），确保钱包连接在手机端也能正常工作
Week 13
安全意识 + 代码质量 + 开源贡献
前端安全：防范 XSS 攻击、钱包签名钓鱼、恶意合约交互。了解 EIP-712 签名验证
代码质量：用 ESLint + Prettier 规范代码，写单元测试（Vitest），学会用 TypeScript 严格模式
找 1-2 个 开源 Web3 项目（如 scaffold-eth-2）提交 PR：修 bug、补文档、加测试都行
完善 GitHub profile，给每个项目写好 README（英文），配上截图和演示链接
阶段交付：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 道
准备英文自我介绍和项目介绍（Web3 公司多远程，英文沟通是加分项）
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），你现在能写合约+前端，可以独立参赛
Week 16
面试实战 + 查漏补缺
积极面试，把每次面试当作学习机会，记录面试题并查漏补缺
常见编码面试：现场实现钱包连接组件、读取合约数据并渲染、处理交易状态的 React 组件
系统设计题准备：如何设计一个 DEX 前端架构？如何做多链适配？如何优化 DApp 性能？
持续优化项目，根据面试反馈迭代代码质量和功能
阶段目标：收到 1-3 个 offer，以"能写合约的 Web3 前端"身份成功入职
📚 核心学习资源
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 专业招聘网站，远程岗位为主
💡 关键策略提醒（v2 更新）
你的目标定位是"能写合约的 Web3 前端"。这在市场上非常稀缺——大多数前端只会调合约，大多数 Solidity 开发不关心 UI。你两头都能做，面试时就是降维打击。
Solidity 够用就行，不要钻牛角尖。你不需要精通 Yul 汇编或做安全审计，但要做到：能独立写 ERC-20/721 合约、会用 Hardhat/Foundry 测试部署、了解常见安全漏洞。面试能聊，入职能干，后续再深入。
全栈 DApp 项目是你的王牌。Week 11 的 Staking 项目（自己写合约 + 自己写前端）是简历上最有说服力的作品，好好打磨。
前 8 周利用碎片时间打基础，后 8 周集中火力做项目和求职。这个节奏刚好匹配你的时间安排。
英文能力是隐藏加分项。Web3 岗位大量远程，文档和社区都是英文环境，现在就开始用英文写代码注释和 README。
React
Next.js
TypeScript
Tailwind
Wagmi
Viem
RainbowKit
Ethers.js
Solidity
Hardhat
Foundry
OpenZeppelin
The Graph
IPFS