Let'sMoveSui环形掌上战争0基础开发入门到精通(6)第六章前端基础使用框架目前我们采用官方的reactdapp框架作为练手的项目,这个框架好处在于已经整合了一些sui.js的的功能。使得开发人员着重在项目的构思上,通过一些简单的编码就能实现游戏雏形。前端项目搭建(1)
<!--StartFragment-->
目前我们采用官方的react dapp框架作为练手的项目,这个框架好处在于已经整合了一些sui.js的的功能。 使得开发人员着重在项目的构思上,通过一些简单的编码就能实现游戏雏形。
首先使用官网提供的建立命令
npm create @mysten/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-->
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!