引言

Scaffold-ETH 2 是一个开源的工具包，旨在简化去中心化应用（DAPP）的开发，特别是在以太坊区块链上的智能合约编写和前端构建。作为一个高效且灵活的开发框架，它将前端、智能合约以及区块链交互融为一体，使得开发者能够快速构建和迭代自己的应用程序。Scaffold-ETH 2 集成了多个强大的工具，如 Hardhat、Next.js、Tailwind CSS、RainbowKit 等，提供了一个完备的开发环境，帮助开发者专注于业务逻辑，而无需为基础设施或配置烦恼。

通过提供诸如合约热重载、智能合约测试、钱包集成以及本地测试网络等功能，Scaffold-ETH 2 使得开发者能够在本地环境中快速测试和调试智能合约，并且能够轻松地将其与前端进行集成。无论是构建基础的 NFT 项目，还是复杂的去中心化金融（DeFi）应用，Scaffold-ETH 2 都提供了强大的支持。

一、Scaffold-eth框架

官网：点击这里
官方文档：点击这里
Scaffold-ETH 是一个开源、最新的工具包，旨在帮助开发者在以太坊区块链上构建去中心化应用（DAPP）。它的设计目标是简化智能合约的创建和部署，并且让开发者能够轻松构建与这些合约交互的用户界面。
✅合约热重载：您的前端会在您编辑智能合约时自动适配更新。
🔥 燃烧钱包与本地水龙头：通过燃烧钱包和本地水龙头，快速测试您的应用程序。
🔐 与钱包提供商的集成：连接不同的钱包提供商，并与以太坊网络进行交互。

Scaffold-ETH 本身并不是一个产品，而是其他优秀工具的组合或堆栈。它允许您快速构建和迭代您的智能合约和前端。
以下是主要组件:
Hardhat或Foundry （用户选择）用于运行本地网络、部署和测试智能合约。
React Hooks 的Wagmi开始与以太坊合作。
Viem作为低级接口，提供与以太坊交互的原语。 ethers.js 和 web3.js 的替代品。
NextJS用于构建前端，使用许多有用的预制钩子。
RainbowKit用于添加钱包连接。
DaisyUI用于预构建的Tailwind CSS组件。

二、前期准备

搭建项目之前需要准备好这些工具：
Node (>= v18.17)
Yarn (v1 or v2+) 这里建议使用v2+版本
Git

下载完成后可以输入下面的三个命令进行查看版本。

三、搭建Scaffold-ETH 2

有两种选择：
使用 npx 命令： npx create-eth@latest直接引导项目。
使用 git clone 克隆存储库。

（一）使用npx create-eth@latest进行设置

npx create-eth@latest

将看到一系列提示：
项目名称：输入您的项目名称：输入您的项目名称，例如 my-dapp-example。
Solidity 框架What Solidity Framework do you Want to use?: 选择您首选的 Solidity 框架（Hardhat、Foundry）
安装软件包？：按Enter表示yes （默认选项），或输入n并按Enter表示“否”。

设置完成后，导航到项目目录：

cd project-name    #这里的 project-name 是项目目录

如果在 CLI 中选择 Foundry 作为 Solidity 框架，您还需要在计算机上安装 Foundryup。点击 在终端运行：

curl -L https://foundry.paradigm.xyz | bash

如果要使用扩展，可以添加 -e 标志，后跟扩展名称：（扩展只能在新 Scaffold-ETH 2 项目的初始设置期间安装。扩展是 Scaffold-ETH 2 的模块化附加组件，可提供附加功能或作为特定功能的示例。）

npx create-eth@latest -e extension-name

要在创建新的 Scaffold-ETH 2 项目时安装扩展，请运行：

npx create-eth@latest -e {github-username}/{extension-repo-name}:{branch-name}

{branch-name}是可选的。如果未指定，则使用默认分支。
例如： npx create-eth@latest -e ChangoMan/charts-extension

安装扩展具有以下几个优点：

• 与基础 Scaffold-ETH 2 项目无缝集成
• 在项目创建时快速添加新功能、页面、合同或组件
• 与 Scaffold-ETH 2核心更新和改进的兼容性

扩展是包含特定代码（例如智能合约或 UI 组件）的紧凑包，在通过 npx 初始化新项目时会自动与最新版本的 Scaffold-ETH 2 集成。它们是您项目的起点，而不是成品。

（二）使用git clone进行设置

1、克隆仓库：

git clone https://github.com/scaffold-eth/scaffold-eth-2.git

2、进入到此目录

cd scaffold-eth-2

3、安装依赖项

yarn install    #下载依赖时注意路径不能出现中文！！！

四、配置Scaffold ETH-2的开发环境

现在我们的安装已经完成了，接下来我们来配置Scaffold ETH-2的开发环境。

（一）初始化本地区块链

在第一个终端中，运行本地网络：

yarn chain

此命令使用 Hardhat 或 Foundry 启动本地以太坊网络，具体取决于在 CLI 中选择的网络。该网络在您的本地计算机上运行，​​可用于测试和开发。可以在以下位置自定义网络配置：

Hardhat：
packages/hardhat/hardhat.config.ts

Foundry：
packages/foundry/foundry.toml

（二）部署智能合约

在第二个终端中，部署测试合约：

yarn deploy    #我这里之前已经部署好啦，现在不需要生成新的报告

此命令将测试智能合约部署到本地网络。可以修改合约以满足您的需要，合约可以在以下位置找到：

Hardhat：
packages/hardhat/contracts

Foundry：
packages/foundry/contracts

yarn deploy命令使用部署脚本将合同部署到网络。可以自定义位于以下位置的部署脚本：

Hardhat：
packages/hardhat/deploy

Foundry：
packages/foundry/script

（三）启动 NextJS 程序

在第三个终端中，启动 NextJS 应用程序：

yarn start

在http://localhost:3000上访问应用程序。可以使用合约组件或前端中的示例 ui 与智能合约进行交互。可以看到这样的页面。

合约调式页面

（四）如果是Hardhat，可以进行以下操作：

1、编辑智能合约：

在 packages/hardhat/contracts中的YourContract.sol 中

2、编辑部署脚本

在 packages/hardhat/deploy 目录下

3、编辑前端主页

在packages/nextjs/app/page.tsx 编辑前端主页。有关路由和配置页面/布局的指南，请查看 Next.js 文档。

4、编辑应用程序配置

在 packages/nextjs/scaffold.config.ts 中

5、编辑智能合约测试

在 packages/hardhat/test 中，运行测试使用yarn hardhat:test

（五）如果是Foundry，可以进行以下操作：

1、编辑智能合约：

在 packages/foundry/contracts中的YourContract.sol 中

2、编辑部署脚本

在 packages/foundry/script 目录下

3、编辑前端主页

在packages/nextjs/app/page.tsx 编辑前端主页。有关路由和配置页面/布局的指南，请查看 Next.js 文档。

4、编辑应用程序配置

在 packages/nextjs/scaffold.config.ts 中

5、编辑智能合约测试

在 packages/foundry/test 中，运行测试使用yarn foundry:test

五、Scaffold-ETH 2 中的一些核心内容和功能模块的介绍

（一）前端部分：Nextjs+ TypeScript

Scaffold-ETH 2 的前端是基于 Nextjs和TypeScript开发的，具备高可定制性和扩展性。前端部分可以与智能合约进行交互，支持动态更新并自动适应智能合约的更改。

• Nextjs组件：Scaffold-ETH 提供了多个 Nextjs组件，如按钮、表单、NFT 视图、钱包连接器等，可以直接嵌入到你的dApp 中。
• 自动适应智能合约：前端会自动响应智能合约的变化，当你更新合约时，前端会即时反映出最新的状态，避免了传统开发中需要手动重载页面的麻烦。

（二）智能合约部分：Solidity + Hardhat

Scaffold-ETH 2 在智能合约开发方面集成了 Hardhat，这是一个以太坊开发框架，提供了智能合约编译、测试、部署和调试等功能。

• 智能合约模板：框架中包含了常见的合约模板，比如 NFT 合约、代币合约等。你可以根据需求直接修改或扩展这些模板。
• 合约测试：Hardhat 集成了强大的合约测试功能，支持单元测试和集成测试。通过 Hardhat，你可以轻松启动本地测试网络，模拟交易和智能合约交互，进行智能合约调试。
• 合约部署：Scaffold-ETH 2 使用 Hardhat 的部署功能，支持将合约部署到多个以太坊网络（如主网、测试网、以及本地的Hardhat 网络）。

（三）钱包和认证集成

Scaffold-ETH 2 提供了与常见钱包（如 MetaMask、WalletConnect 等）集成的功能，使得用户能够方便地与智能合约进行交互。

• MetaMask 集成：前端与 MetaMask 无缝集成，用户可以通过 MetaMask连接他们的以太坊账户，进行交易签名和智能合约调用。
• 钱包连接器：Scaffold-ETH 支持通过 WalletConnect 等协议连接其他去中心化钱包，让用户有更多选择。

（四）Burner Wallet 和 Local Faucet

Scaffold-ETH 提供了一个内置的 燃烧钱包（Burner Wallet） 和 本地水龙头（Local Faucet），方便开发者进行快速测试。

• Burner Wallet：它允许开发者和测试人员使用虚拟的、临时的以太坊账户进行交互，不需要真实的以太坊。
• Local Faucet：通过本地水龙头，你可以为虚拟账户提供一些测试网络的以太坊（如 Rinkeby 或 Goerli
  网络的测试币），方便进行交易测试。

（五）Hardhat 测试网

Hardhat 测试网是一个本地的以太坊网络，专门用于合约的本地开发和测试。它能模拟真实网络的环境，支持多种常见的测试工具和插件，允许开发者进行高效的调试。

• Hardhat Network：它可以模拟一个完全的以太坊节点，支持在本地进行调试和交易测试。
• 自动化脚本：Scaffold-ETH 提供了自动化脚本，帮助开发者部署合约、执行交易、进行数据录入等，方便调试和自动化测试。

（六）前端开发工具

Scaffold-ETH 2 还集成了开发工具（如 Next.js 和 Tailwind CSS），使得前端开发更加便捷和高效。

• Next.js：Scaffold-ETH 使用 Next.js 作为前端框架，Next.js提供了静态网站生成和服务器端渲染（SSR）等功能，提升了页面加载速度和 SEO 优化。
• Tailwind CSS：Scaffold-ETH 集成了 Tailwind CSS，这是一种实用的 CSS框架，能够帮助开发者快速构建响应式和高度自定义的 UI 界面

（七） 脚本与部署

Scaffold-ETH 2 提供了预配置的部署脚本，你只需调整合约参数，便可以轻松将合约部署到以太坊网络上。部署脚本也支持将合约部署到不同的网络，提升了项目的灵活性。

（八）多网络支持

Scaffold-ETH 2 支持多个以太坊网络，包括主网、各种测试网（如 Rinkeby、Goerli）和本地模拟网络（Hardhat Network）。开发者可以选择适合的网络进行部署和测试。

（九）集成测试

Scaffold-ETH 2 支持集成测试，开发者可以编写和执行集成测试，确保前端和智能合约的交互没有问题。

Hardhat + Mocha：集成了 Hardhat 和 Mocha 测试框架，开发者可以轻松编写智能合约的测试用例，进行单元测试和集成测试。

（十）GitHub 集成

Scaffold-ETH 2 的源码托管在 GitHub 上，开发者可以直接克隆项目，进行修改和定制。框架本身是完全开源的，开发者可以根据需要进行二次开发。

（十一）合约热重载（Contract Hot Reload）

Scaffold-ETH 2 提供了智能合约的热重载功能。当你修改合约代码并保存时，前端应用会自动更新，且不需要手动刷新页面。这使得前后端开发更加高效，减少了等待时间。

总结

Scaffold-ETH 2 是一个集成度高、功能丰富的开发框架，适合从智能合约到前端展示的全栈开发。通过预配置的开发工具和自动化的工作流程，开发者能够迅速开始项目开发，并专注于构建应用逻辑，而无需过多关注基础设施配置。它不仅支持 Solidity 和 Hardhat，还能与多个以太坊网络进行交互，并提供了多种常见功能的模板和扩展插件，使得项目启动和部署变得更加快速和简便。无论是新手还是经验丰富的开发者，Scaffold-ETH 2 都能提供所需的工具和功能，帮助开发者快速实现从合约编写、部署到前端界面交互的完整 DAPP 开发流程。