Let's Move Sui环形掌上战争 0基础开发入门到精通(6)

<!--StartFragment-->

Let's Move Sui环形掌上战争 0基础开发入门到精通(6)

第六章 前端基础

使用框架

目前我们采用官方的react dapp框架作为练手的项目，这个框架好处在于已经整合了一些sui.js的的功能。 使得开发人员着重在项目的构思上，通过一些简单的编码就能实现游戏雏形。

前端项目搭建（1）

首先使用官网提供的建立命令

npm create @mysten/dapp

此时会询问用户建立哪种模板

• react-e2e-counter： 适合初学者，能够快速了解整体框架情况。
• react-client-dapp： 适合已经有过项目经验的老手，可以认为它是一个空白的工程。

0基础开发者可以先尝试使用 react-e2e-counter来建立项目，熟悉一下项目结构。

注意两个目录

<DIR>          move
<DIR>          src

move是存放sui智能合约的目录，里面是有一个子目录counter src是存放react前端框架代码

可以阅读 Readme.md文件来大致了解这套工程具体使用了什么工具

This dApp was created using `@mysten/create-dapp` that sets up a basic React
Client dApp using the following tools:

- [React](https://react.dev/) as the UI framework
- [TypeScript](https://www.typescriptlang.org/) for type checking
- [Vite](https://vitejs.dev/) for build tooling
- [Radix UI](https://www.radix-ui.com/) for pre-built UI components
- [ESLint](https://eslint.org/) for linting
- [`@mysten/dapp-kit`](https://sdk.mystenlabs.com/dapp-kit) for connecting to
  wallets and loading data
- [pnpm](https://pnpm.io/) for package management

根据文档,可以了解到一些sui的基本命令和操作，这部分是给sui初学者一个参考。 大部分的初学者其实已经掌握了sui cli 的各项操作了。这里不再冗述。

接下来试着根据文档，发布合约。

cd move
sui client publish --gas-budget 100000000 counter

此处 counter 是指定一个目录

如果不成功的话，记得修改一下 toml文件里的 dependencies项

[dependencies]

Sui = { git = "https://github.com/MystenLabs/sui.git", subdir = "crates/sui-framework/packages/sui-framework", rev = "framework/devnet" }

把 rev = "framework/devnet" 改为 rev = "testnet"

等待一会儿就正常打包发布了

UPDATING GIT DEPENDENCY https://github.com/MystenLabs/sui.git
INCLUDING DEPENDENCY Sui
INCLUDING DEPENDENCY MoveStdlib
BUILDING counter
Successfully verified dependencies on-chain against source.
Transaction Digest: F4QEKeH8uaxKNnMjV1PSpCLRJDPb5DvFbFk6XEgkJMSa

另从sui v1.20.1开始 在windows环境中 cmd状态下的编译是不过的,要切换到Powershell状态下去编译。 切记！

发布成功后别急着关掉窗口，

需要记录下 PackageID：0xcbeb94b3ba55934f330afa3adc8f7774c43770322b6eed99b08a16333ec038de

找到src目录中 constants.ts 文件 将PackageID填入，由于我是testnet环境所以加入一项testnet的。 新手尽量不要用devnet，因为devnet经常会出很多问题，导致很多人学习不下去。

在 networkConfig.ts 里也将testnet相关的补好,红字先不去管它。

把testnet相关的部分补上就可以尝试编译了

先install

pnpm install

install 要等一会儿，因为初始化很多框架代码。

添加图片注释，不超过 140 字（可选）

耐心等待。

install完成后启动项目

pnpm dev

在浏览器（最好是chorme）里输入 http\://localhost:5173/

项目顺利启动

(未完待续)

telegram: https\://t.me/move_cn

QQ群: 79489587

<!--EndFragment-->