# 井字棋游戏本地开发及静态产物验证实践
前端开发中，会面临TypeScript类型不规范、界面样式调试耗时、工程配置易出错等问题。本实践以Next.js+React+TypeScript井字棋单页应用本地开发场景为例，帮助开发者依托华为云码道代码智能体完成项目初始化、代码生成、本地功能全量验证，提升前端研发效率与代码质量。
#### 准备工作
在使用华为云码道代码智能体前，您需要先创建一个项目，用于集中存放工程中的各类文件。项目创建完成后，建议开启自动批准功能，AI将自动处理相关操作，无需人工干预。
1. 参考[快速启动](https://support.huaweicloud.com/usermanual-codeartsagent/codeartsagent_ug_0002.html)中操作，登录华为云码道代码智能体。
2. 创建一个项目，用于存放工程中的文件。 
   1. 在IDE工具顶部菜单栏中，单击"文件(F)"，选择"新建 \> 新建项目"，进入新建项目页面。
   
   2. 选择项目存放位置，输入项目名称（例如Tic-Tac-Toe_Demo），单击"确定"。 **项目名称必须以字母开头，可包含字母、数字、中划线或下划线，且总长度不能超过64个字符。**
      项目创建完成后，在"资源管理器"中可以查看到已创建的TIC-TAC-TOE_DEMO项目。
      
   
   
   
   
3. （可选）选择智能体运行模式并授权自动化操作。 
   1. 单击华为云码道代码智能体IDE右上角的设置图标 ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002665112075.png)，进入全局设置页面。
   
   2. 在"对话流 \> 智能体 \> 终端命令运行模式"中，选择智能体执行终端命令的运行策略，本实践依赖较多，推荐选择"手动模式"。
   
   3. 在"对话流 \> 智能体 \> 自动批准"中，单击 ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002634872944.png)以开启所需的自动批准项目。
      **授权自动化操作后，复杂工程级代码生成流程中的各项任务可自动执行。** **如果您未开启自动化操作授权，在使用华为云码道代码智能体进行编码时，部分操作将需要您手动确认。**
      ![](https://support.huaweicloud.com/bestpractice-codeartsagent/public_sys-resources/caution_3.0-zh-cn.png)
      开启自动批准存在操作风险，请在开启前充分评估风险，并在安全可信环境中使用。
      表1自动批准参数说明 
      | 参数     | 说明                                          | 示例 |
      |:---|:---|:---|
      | 编辑     | 允许智能体调用edit、write、deleteFile等工具来编辑您计算机上的文件。 | 开启 |
      | 使用浏览器  | 允许智能体在浏览器中访问网站。                             | 开启 |
      | 网页抓取工具 | 允许智能体访问并抓取指定网页的内容。                          | 开启 |
         
      
   
   4. 退出当前页面，完成授权操作。
   
   
   
   
 
#### 生成井字棋核心代码与界面
1. 在华为云码道代码智能体聊天界面的输入框中，输入如下提示词，并单击发送图标 ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002681606719.png "点击放大")。
   
   ```
   基于React+TypeScript+Next.js 14 App Router编写井字棋游戏页面，要求：
   1. 游戏棋盘整体在页面水平、垂直居中；
   2. 页面添加标题和游戏玩法说明；
   3. X、O使用不同颜色区分；
   4. 代码结构规范，可直接运行。
   ```
   
   
2. 任务执行的过程中，所有终端操作及高风险命令的运行，需要手动确认运行，等待项目创建成功。 
   当前展示的效果图仅是示例，请以最终实际生成的效果为准。
   图1项目创建过程   
   ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002681839021.png "点击放大")
   
   
3. 单击"全部接受"，接受当前文件修改。
 
#### 开发环境调试
代码生成完成后，可以先在开发环境完成全量功能验证，确认功能正常后再进行打包配置，提前规避逻辑问题。
1. 启动Next.js本地开发调试服务。 
   1. 本地设备上打开命令提示符窗口，以Windows 11操作系统为例。同时按下"Win+R"，在打开的"运行"对话框中输入cmd，按"Enter"。
   
   2. 切换到当前项目所在的目录，以如下目录为例。
      ```
      D:
      cd \VS\Tic-Tac-Toe_Demo
      ```
      
   
   3. 执行启动命令，启动Next.js本地开发调试服务，等待编译就绪。
      ```
      npm run dev
      ```
      图2服务启动完成   
      ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002634880948.png) 
   
   
   
   
2. 浏览器打开网址http://localhost:3000，进行逐项功能验证： 
   - 界面：标题、玩法说明、棋盘布局展示正常，X/O颜色区分清晰。
   
   - 交互：点击格子可正常落子，已占用格子无法重复点击。
   
   - 逻辑：横、竖、斜线连线可正常判定获胜，棋盘填满后正确判定平局。
   
   
   图3功能预览   
   ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002635534654.png "点击放大")
   
   
 
#### 静态打包与验证
开发环境验证通过后，再配置打包规则、执行编译，并最终验证静态资源。
1. 在华为云码道代码智能体聊天界面的输入框中，输入如下打包规则，并单击发送图标 ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002651567098.png "点击放大")。
   
   ```
   修改next.config.mjs，开启静态导出，打包输出目录设为out，确保代码无报错、可正常打包。
   ```
   
   
2. 打包构建项目并预览生产静态资源。 
   1. 在本地设备上打开命令提示符窗口，以Windows 11操作系统为例。同时按下"Win+R"，在打开的"运行"对话框中输入cmd，按"Enter"。
   
   2. 切换到当前项目所在的目录，以如下目录为例。
      ```
      D:
      cd \VS\Tic-Tac-Toe_Demo
      ```
      
   
   3. 执行启动命令，进行生产环境打包构建，等待全量编译优化完成。
      ```
      npm run build
      ```
      
   
   4. 执行如下命令，全局安装静态文件服务（仅首次安装执行）。
      ```
      npm install -g serve
      ```
      
   
   5. 执行如下命令，启动静态服务。
      ```
      serve -s out
      ```
      图4本地终端执行启动静态服务命令   
      ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002665724245.png "点击放大") 
   
   
   
   
3. 根据输出地址访问页面，再次完整校验界面、交互、胜负判断等功能，确保静态产物与开发环境验证结果表现一致。 
   当前展示的效果图仅是示例，请以最终实际生成的效果为准**。**
   图5验证效果   
   ![](https://support.huaweicloud.com/bestpractice-codeartsagent/zh-cn_image_0000002635371614.png "点击放大")
   
   
 
#### 常见问题及解决方案
| 问题现象                    | 根因分析      | 解决方案                                                                                                                                  |
|:---|:---|:---|
| 执行npm run dev后，页面依然无法访问 | 端口占用      | 指定新端口，例如被占用的是3000，指定成3001。执行npm run dev -- -p 3001（新端口）。                                                                              |
| 开发环境功能正常，打包后out目录缺失     | 未正确配置静态导出 | 重新执行打包配置提示词，修正next.config.mjs文件。 ``` 修改next.config.mjs，开启静态导出，打包输出目录设为out，确保代码无报错、可正常打包。 ``` |