2. 设置前端

这是在 Aptos 上构建端到端 dApp教程的第二章。您已经创建智能合约，现在开始设置前端。

设置前端

create-aptos-dapp 已使用基本布局以及通过 aptos-wallet-adapter 库实现的钱包为我们创建了前端。

运行：npm run dev

此时，您的应用应在 http://localhost:5173 运行，并显示默认模板布局。
在 frontend 目录中找到所有前端文件。让我们稍作清理。
打开 App.tsx 文件，并将其内容更新为：

import { Header } from "@/components/Header";
import { TopBanner } from "@/components/TopBanner";

function App() {
  return (
    <>
      <TopBanner />
      <Header />
      <div className="flex items-center justify-center flex-col">
        <div>My app goes here</div>
      </div>
    </>
  );
}

export default App;

保存变更后，您应看到浏览器中的应用内容已更改，并显示 My app goes here。

我们的 dApp UI

首先构建 dApp UI 布局。应用有两种 UI 状态：

账户尚未创建列表时（左侧）。
账户已创建列表，现在可向其中添加任务时（右侧）。

现在您已有一个可用的客户端，其中包含连接钱包按钮和钱包选择器模态框。欢迎试用并连接钱包。

接下来在第 3 章学习如何从链上获取数据。