以太坊DApp开发脚手架:Scaffold-ETH 2 详细介绍与搭建教程

一、什么是Scaffold-ETH 2

Scaffold-ETH 2是一个开源的最新工具包,类似于脚手架。用于在以太坊区块链上构建去中心化应用程序 (DApp)。它旨在使开发人员更容易创建和部署智能合约,并构建与这些合约交互的用户界面。

Scaffold-ETH 2 是 Scaffold-ETH 的第二代版本

二、为什么要用Scaffold-ETH 2

传统以太坊 DApp 开发存在工具链碎片化问题,开发者需手动整合智能合约开发框架 (如 Hardhat/Foundry)、前端框架 (如 Next.js)、钱包连接组件 (如 RainbowKit)、以太坊交互库 (如 Viem)及 React Hooks 工具(如 Wagmi)等独立工具。这种碎片化开发模式导致:

  1. 配置复杂度高:需手动处理依赖冲突、环境变量同步、跨模块通信等底层问题
  2. 开发效率低:开发者需编写大量样板代码实现基础功能
  3. 学习曲线陡峭:新手需掌握多个工具的配置方法和交互逻辑

Scaffold-ETH 2 通过预集成工具链和自动化工作流,彻底解决传统开发流程中配置繁琐、工具链碎片化的痛点。

三、搭建Scaffold-ETH 2开发环境

环境要求:

Node (>= v18.17)

Yarn (v1 or v2+)

Git

项目路径不能出现中文

第一步:执行npx命令

bash 复制代码
npx create-eth@latest

第二步:输入项目名称(my-study-demo)

第三步:选择合约开发框架(hardhat)

第四步:等待依赖安装完毕

第四步:进入项目根目录

bash 复制代码
cd my-study-demo

第五步:启动hardhat本地开发链

bash 复制代码
yarn chain

第六步:新建终端,并进入到项目根目录

第七步:部署智能合约

bash 复制代码
yarn deploy

注意:部署好合约后,合约的abiaddress会自动生成在package/nextjs/contract/deployedContracts.ts

第八步:启动项目

bash 复制代码
yarn start

第九步:验证项目

第十步:调试智能合约

第十一步:查看区块链浏览器

四、Scaffold-ETH 2 目录介绍

1.根目录

  • .github: GitHub 相关的配置和文件目录。
  • .husky:Git 钩子脚本目录。
  • .yarn:Yarn 缓存目录。
  • node_modules:全局依赖包目录。
  • packages:存放hardhat/foundry和nextjs的目录。
  • .gitignore:Git 忽略文件配置。
  • .lintstagedrc.js:Lint-staged 配置文件。
  • .yarnrc.yml:Yarn 配置文件。
  • CONTRIBUTING.md:贡献指南。
  • LICENSE:项目许可协议(MIT 协议)。
  • package.json:根目录元数据、脚本和依赖项文件。
  • README.md:项目说明文档。
  • yarn.lock:Yarn 依赖包版本锁定文件。

2.hardhat目录

  • contracts:包含项目的 Solidity 智能合约目录。
  • deploy:包含合约部署脚本的目录。
  • node_modules:特定于 Hardhat 环境的依赖项。
  • scripts:包含编译合约或执行自定义任务的各种脚本的目录。
  • test:包含智能合约测试脚本的目录。
  • hardhat.config.ts:硬帽配置文件,用于自定义开发环境。
  • package.json:Hardhat 包的元数据、脚本和依赖项文件。
  • tsconfig.json:Hardhat 项目中 TypeScript 的配置文件。

3.nextjs目录

  • app:Next.js 前端的主应用程序逻辑和页面。
  • components:应用程序的可重用 UI 组件。
  • contracts:包含部署后合约的地址和ABI 文件或合约交互逻辑的地方。
  • hooks:自定义 React hook,可能用于与区块链数据交互或管理状态。
  • node_modules:特定于 Next.js 环境的依赖项。
  • public:可以公开访问的静态资源,如图片和字体。
  • services:外部 API 调用或业务逻辑的服务。
  • styles:应用程序的 CSS 或样式文件。
  • types:特定于应用程序的 TypeScript 类型定义。
  • utils:应用程序中使用的工具函数或助手。
  • next-env.d.ts:Next.js 类型的 TypeScript 声明文件。
  • next.config.js:Next.js 的配置文件,以自定义其行为。
  • package.json:Next.js 包的元数据、脚本和依赖项。
  • postcss.config.js:PostCSS 的配置文件,一个用于转换 CSS 的工具。
  • scaffold.config.ts:scaffold-eth的配置文件,为项目特定配置。
  • tailwind.config.js:Tailwind CSS 的配置,一个优先使用工具类的 CSS 框架。
  • tsconfig.json:Next.js 项目中 TypeScript 的配置。
  • vercel.json:Vercel 平台用于配置项目部署和运行行为的文件。
相关推荐
神秘的猪头13 小时前
React 脱围机制(二):重新理解 useEffect——它不是生命周期,而是同步外部系统
react.js
卡布鲁13 小时前
React useMemo 与 useCallback 完全指南:原理、场景与避坑
前端·react.js
baopixiaoz14 小时前
BeeQuant × BeeAgent:用AI加速策略验证
大数据·人工智能·python·区块链
右耳朵猫AI18 小时前
Web前端周刊2026W38 | React 19.3 发布、StyleX 深潜、jsdom 30.1 提速
前端·javascript·react.js·typescript·node.js
溪语流沙20 小时前
Django + Vue电商项目第001讲:开篇|注册登录加增删改查,那不是电商
redis·python·mysql·docker·typescript·django·vue
磐链科技1 天前
区块链开发公司发展趋势分析:智能合约、DApp与行业数字化应用探索
区块链·智能合约
掰头战士2 天前
多重影分身!恨不得把一个agent掰成两个? 还真能干!
typescript·llm·agent
皇儒无上2 天前
智慧矿山-关于推进山西省煤矿灾害差异化智能化建设强化 AI 风险防控的政策建议
人工智能·机器学习·区块链
shmily麻瓜小菜鸡2 天前
TDD(测试驱动开发)详解
开发语言·javascript·typescript·node.js·ecmascript