以太坊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 平台用于配置项目部署和运行行为的文件。
相关推荐
GISer_Jing15 分钟前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ16 分钟前
React(九)React Hooks
前端·react.js
旭久2 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
阿丽塔~3 小时前
React 函数组件间怎么进行通信?
前端·javascript·react.js
yanxy5123 小时前
【TS学习】(15)分布式条件特性
前端·学习·typescript
前端菜鸟来报道4 小时前
前端react 实现分段进度条
前端·javascript·react.js·进度条
区块链蓝海4 小时前
沉浸式体验测评|AI Ville:我在Web3小镇“生活”了一周
人工智能·web3·生活
sen_shan5 小时前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
傻球6 小时前
Jotai 使用详解:React 轻量级状态管理库
前端·react.js
用户061760544436 小时前
Ts进阶使用知识分享
typescript