一、什么是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命令

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