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

发布于：2025-04-01 ⋅ 阅读:(21) ⋅ 点赞:(0)

一、什么是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）等独立工具。这种碎片化开发模式导致：

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

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

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

环境要求：
Node (>= v18.17)
Yarn (v1 or v2+)
Git
项目路径不能出现中文

第一步：执行npx命令

npx create-eth@latest

在这里插入图片描述

第二步：输入项目名称（my-study-demo）

在这里插入图片描述

第三步：选择合约开发框架（hardhat）

在这里插入图片描述

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

在这里插入图片描述

第四步：进入项目根目录

cd my-study-demo

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

yarn chain

在这里插入图片描述

第六步：新建终端，并进入到项目根目录

在这里插入图片描述

第七步：部署智能合约

yarn deploy

在这里插入图片描述

注意：部署好合约后，合约的abi和address会自动生成在package/nextjs/contract/deployedContracts.ts 中

第八步：启动项目

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 平台用于配置项目部署和运行行为的文件。