以太坊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 平台用于配置项目部署和运行行为的文件。
相关推荐
光影少年9 小时前
react的hooks防抖和节流是怎样做的
前端·javascript·react.js
m0_7190841110 小时前
React笔记张天禹
前端·笔记·react.js
Ziky学习记录10 小时前
从零到实战:React Router 学习与总结
前端·学习·react.js
青青家的小灰灰11 小时前
React 19 核心特性与版本优化深度解析
react.js
却尘12 小时前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
早點睡39014 小时前
高级进阶 React Native 鸿蒙跨平台开发:@react-native-community-slider 滑块组件
react native·react.js·harmonyos
devmoon17 小时前
Polkadot SDK Pallet 单元测试完整指南:从基础到实战
单元测试·web3·区块链·模块测试·polkadot
鹏多多18 小时前
移动端H5项目,还需要react-fastclick解决300ms点击延迟吗?
前端·javascript·react.js
空白诗18 小时前
React Native 鸿蒙跨平台开发:react-native-svg 矢量图形 - 自定义图标与动画
react native·react.js·harmonyos
liyang_ii18 小时前
createAsyncThunk
react.js