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

  • Summer.XJ
  • 更新于 2024-03-31 18:36
  • 阅读 899

Let'sMoveSui环形掌上战争0基础开发入门到精通(6)第六章前端基础使用框架目前我们采用官方的reactdapp框架作为练手的项目,这个框架好处在于已经整合了一些sui.js的的功能。使得开发人员着重在项目的构思上,通过一些简单的编码就能实现游戏雏形。前端项目搭建(1)

<!--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来建立项目,熟悉一下项目结构。

注意两个目录

&lt;DIR>          move
&lt;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-->

点赞 0
收藏 0
分享
本文参与登链社区写作激励计划 ,好文好收益,欢迎正在阅读的你也加入。

0 条评论

请先 登录 后评论
Summer.XJ
Summer.XJ
0x0d54...9e80
学好Sui MOVE