Vue 资深开发 → Web3 DApp 前端工程师
16 周 Web3 转型学习计划
基于 2026 年最新岗位 JD 和市场需求，为有多年 Vue 经验的前端开发者量身定制。前 8 周每天 1-2 小时，后 8 周每天 4+ 小时。
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
Solidity 入门 + 智能合约初体验
用 Remix IDE（在线编辑器）学习 Solidity 基础语法：变量、函数、修饰符、事件
写一个简单的存储合约，部署到 Sepolia 测试网，理解部署→调用→读取的完整流程
了解 ERC-20（代币标准）和 ERC-721（NFT 标准）的基本结构，不需要精通，但前端必须看得懂 ABI
阶段交付：能用 React + Next.js 写基本页面，理解区块链运作原理，能读懂简单的 Solidity 合约
Week 5
Viem + Ethers.js — 链上交互基础
学习 Viem（2026 行业首选的 TypeScript 以太坊库）：创建 PublicClient，读取链上数据（余额、区块号、合约状态）
理解 ABI 编码/解码，用 Viem 调用你在 Week4 部署的合约
顺带了解 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
第二个 DApp 实战：NFT 铸造页面
用 Hardhat 或 Foundry 部署一个简单的 ERC-721 合约到测试网
写一个 NFT Mint 页面：展示 NFT 图片 → 连接钱包 → Mint → 展示铸造结果
学习 IPFS 存储元数据，了解 NFT 图片/JSON 的存储方式
做好 UI/UX：响应式布局、加载动画、错误提示。Web3 项目很看重前端体验
阶段交付：GitHub 上有 2 个可运行的 DApp 项目，掌握 Web3 前端核心技术栈
Week 9
DeFi 前端实战：Token Swap 界面
做一个仿 Uniswap 的 Token Swap 前端（可以对接测试网 DEX 合约或 mock 数据）
学习 multicall 批量读取链上数据，优化 RPC 请求次数
处理代币 Approve → Swap 的两步交易流程，学习 allowance 机制
实现实时价格更新、滑点设置等 DeFi 常见交互
Week 10
The Graph + 链上数据展示
学习 The Graph 协议：写 Subgraph 索引链上事件，用 GraphQL 查询数据
给 Week9 的 Swap 项目加上交易历史页面：从 Subgraph 拉取历史交易记录并展示
学习 WebSocket / 事件监听：用 Viem 的 watchContractEvent 实时监听链上事件并更新 UI
Week 11
综合项目：DeFi Dashboard
重头项目：做一个 DeFi 仪表盘，展示用户在多个协议中的资产、收益、交易记录
技术要点：多链支持（Ethereum + Polygon/Arbitrum）、复杂状态管理、数据可视化（用 Recharts）
性能优化：懒加载、请求缓存策略（TanStack Query staleTime）、骨架屏
移动端适配（Web3 JD 普遍要求），确保钱包连接在手机端也能正常工作
Week 12
安全意识 + 代码质量 + 开源贡献
前端安全：防范 XSS 攻击、钱包签名钓鱼、恶意合约交互。了解 EIP-712 签名验证
代码质量：用 ESLint + Prettier 规范代码，写单元测试（Vitest），学会用 TypeScript 严格模式
找 1-2 个 开源 Web3 项目（如 scaffold-eth-2）提交 PR：修 bug、补文档、加测试都行
完善 GitHub profile，给每个项目写好 README（英文），配上截图和演示链接
阶段交付：GitHub 上有 4-5 个项目 + 开源贡献记录，具备中级 Web3 前端能力
Week 13
简历打磨 + 面试题库
重写简历：突出 Vue → React 转型 + Web3 项目经验。用数据说话（优化了 X%、处理了 Y 类场景）
准备高频面试题：React Hooks 原理、Wagmi 工作流、钱包连接流程、交易生命周期、EVM 基础
刷 Web3 前端特有面试题：如何防止重复提交交易？如何处理链切换？如何做 Gas 估算？
准备英文自我介绍和项目介绍（Web3 公司多远程，英文沟通是加分项）
Week 14
海投 + 社区曝光
在 web3.career、remote3.co、cryptocurrencyjobs.co、LinkedIn 大量投递，每天 5-10 个岗位
加入 Web3 开发者社区：Discord（Ethereum、Wagmi）、Twitter/X 关注 Web3 项目方，参与讨论
写 1-2 篇技术博客（中英文皆可）：分享 Vue 转 React + Web3 的经验，发到 Mirror/Medium
参加 Web3 Hackathon（如 ETHGlobal），即使拿不到奖，经历本身就是简历亮点
Week 15-16
面试实战 + 查漏补缺
积极面试，把每次面试当作学习机会，记录面试题并查漏补缺
常见编码面试：现场实现钱包连接组件、读取合约数据并渲染、处理交易状态的 React 组件
系统设计题准备：如何设计一个 DEX 前端架构？如何做多链适配？如何优化 DApp 性能？
持续优化项目，根据面试反馈迭代代码质量和功能
阶段目标：收到 1-3 个 offer，成功入职 Web3 DApp 前端开发岗
📚 核心学习资源
React
react.dev 官方文档
最好的 React 学习资料，有 Vue 基础 3-5 天可过完
Next.js
nextjs.org/learn
官方交互式教程，边学边做
Web3 入门
ethereum.org/developers
以太坊官方开发者入门教程
Solidity
CryptoZombies
游戏化学 Solidity，轻松有趣
Wagmi
wagmi.sh 官方文档
React Hooks for Ethereum，必读
Viem
viem.sh 官方文档
TypeScript 以太坊客户端，Wagmi 底层
实战脚手架
scaffold-eth-2
最佳 DApp 全栈学习模板，Next.js + Wagmi
求职平台
web3.career / remote3.co
Web3 专业招聘网站，远程岗位为主
💡 关键策略提醒
你的核心优势是前端工程化能力。多年 Vue 经验意味着你对组件化、状态管理、性能优化的理解已经很深。React 只是换了语法，Web3 只是加了一层链上交互。不要被新概念吓到。
项目 > 证书。Web3 行业看的是你做了什么，GitHub 就是你的简历。每个项目都要部署上线、写好 README、配上截图。
前 8 周利用碎片时间打基础，后 8 周集中火力做项目和求职。这个节奏刚好匹配你的时间安排。
英文能力是隐藏加分项。Web3 岗位大量远程，文档和社区都是英文环境，现在就开始用英文写代码注释和 README。
React
Next.js
TypeScript
Tailwind
Wagmi
Viem
RainbowKit
Ethers.js
Solidity 基础
The Graph
Hardhat
IPFS