做网站前端要会什么app开发多少钱
一、什么是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）等独立工具。这种碎片化开发模式导致：
- 配置复杂度高：需手动处理依赖冲突、环境变量同步、跨模块通信等底层问题
- 开发效率低：开发者需编写大量样板代码实现基础功能
- 学习曲线陡峭：新手需掌握多个工具的配置方法和交互逻辑
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 平台用于配置项目部署和运行行为的文件。