以太坊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 平台用于配置项目部署和运行行为的文件。
相关推荐
caijingshiye3 小时前
BitMart 启动中文品牌“币市”:引领加密资产本地化发展新篇章
人工智能·区块链
我不吃饼干6 小时前
在 React 中实现倒计时功能会有什么坑
前端·react.js
Dream Algorithm7 小时前
保证金率(Margin Ratio)
区块链
啃火龙果的兔子11 小时前
解决 Node.js 托管 React 静态资源的跨域问题
前端·react.js·前端框架
sophie旭11 小时前
《深入浅出react》总结之 10.7 scheduler 异步调度原理
前端·react.js·源码
然我11 小时前
还在为 Redux 头疼?Zustand 让 React 状态管理轻到能 “揣兜里”
前端·react.js·面试
Ashlee_code13 小时前
北极圈金融科技革命:奥斯陆证券交易所的绿色跃迁之路 ——从Visma千倍增长到碳信用衍生品,解码挪威资本市场的技术重构
科技·算法·金融·重构·架构·系统架构·区块链
Jimmy15 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
007tg15 小时前
007TG洞察:波场TRON上市观察,Web3流量工具的技术解析与应用
大数据·人工智能·产品运营·web3·职场发展·技术洞察·品牌运营
安心不心安15 小时前
React ahooks——副作用类hooks之useThrottleEffect
前端·react.js·前端框架