一、什么是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 平臺用于配置項目部署和運行行為的文件。