以太坊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 平台用于配置项目部署和运行行为的文件。
相关推荐
央链知播16 小时前
重磅新书 | 《链改2.0:从数字资产到RWA》
金融·区块链·业界资讯
Webb Yu16 小时前
加密货币学习路径
学习·区块链
openHiTLS密码开源社区18 小时前
椭圆曲线密码学的效率核心:单标量与多标量乘法详解
区块链·零知识证明·rsa·隐私保护·ecc·多标量·单标量
本郡主是喵19 小时前
基于区块链的商品溯源平台的设计与实现(源码+文档)
区块链
数据与人工智能律师19 小时前
数据淘金时代的法治罗盘:合法收集、使用与变现数据的边界与智慧
大数据·网络·人工智能·云计算·区块链
_pengliang20 小时前
React Native 使用 react-native-credentials-manager 接入谷歌登录教程
javascript·react native·react.js
im_AMBER20 小时前
React 07
前端·笔记·学习·react.js·前端框架
濮水大叔21 小时前
VonaJS AOP编程🚀大杀器🔪:外部切面
typescript·node.js·nestjs
濮水大叔21 小时前
VonaJS AOP编程大杀器:外部切面
typescript·nodejs·nestjs
本郡主是喵21 小时前
基于区块链的新能源管理平台的设计与实现(源码+文档)
web3