案例简介：依托华为云码道（CodeArts）代码智能体和通过华为云AI Shell快速生成与部署 Vue3 + Vite + localStorage 搭建纯前端任务管理看板，支持新建任务卡片，自定义标题、描述与分类；通过拖拽自由切换任务状态，搭配分类标签快速筛选；全部操作自动存储至 localStorage，页面刷新数据不会丢失，同时部署至华为云服务器进行上线。
本案例由开发者：武汉大学-华为云高校公开课实战团队提供，华为开发者空间案例中心优化并收录。
本案例在线体验地址：纯前端拖拽任务看板
该案例基于 AI 生成搭建，每次生成的项目效果略有不同，如需完整体验该案例可在纯前端拖拽任务看板源码处下载并体验。
一、概述
1.1 案例介绍
- 市场潜力：2026 年全球待办与个人效率工具市场规模近百亿美元，个人轻量化管理细分赛道保持年均 10% 以上稳定增速。
- 用户习惯：超 7 成学生与职场年轻人反感复杂软件配置，偏好开箱即用、无需注册登录、数据留存本地的纯前端工具，拖拽式交互接受度极高。
- 场景拓展：从职场项目迭代、日常工作待办，延伸至学生课程规划、小组作业统筹、自媒体内容排期、个人副业进度管理，轻量化看板适用场景持续拓宽。
依托华为云码道（CodeArts）代码智能体和通过华为云AI Shell快速生成与部署 Vue3 + Vite + localStorage 搭建纯前端任务管理看板，支持新建任务卡片，自定义标题、描述与分类；通过拖拽自由切换任务状态，搭配分类标签快速筛选；全部操作自动存储至 localStorage，页面刷新数据不会丢失，同时部署至华为云服务器进行上线。
案例技术选型：
- 华为云码道（CodeArts）代码智能体是基于智能生成、智能问答两大核心能力构建起一套全方位、多层次的智能开发体系。在智能生成方面，它能够依据开发者输入的需求描述，准确且高效地生成高质量代码；智能问答功能则如同开发者身边的专属技术顾问。
- 华为云AI Shell：智能 AI 命令行工具，以自然语言驱动终端操作，无需熟记复杂指令，大幅降低使用门槛，一站式完成华为云资源查询、操作、运维工作，让终端操作更高效、更智能。让华为云更好用、更易用。
- Gitcode MCP Server是Gitcode推出的模型上下文协议(Model Context Protocol)服务实现，旨在通过标准化协议将AI助手深度集成到代码管理流程中。它允许开发者通过AI编程工具直接操作代码仓库资源，实现智能化开发协作。
1.2 适用对象
- 个人开发者
- 高校学生
- 企业开发者
1.3 案例时间
本案例总时长预计60分钟。
1.4 案例流程
说明：
- 本地安装华为云码道（CodeArts）代码智能体。
- 下载任务看板应用SKILL。
- 通过码道开发任务看板应用。
- 任务看板应用通过GirCodeMCP Server上传至GitCode代码仓。
- 通过AI Shell拉取GitCode代码
- 通过AI Shell部署看板应用至华为云服务器。
1.5 资源总览
本案例涉及应用开发及应用部署，开发至本地启动过程免费，应用部署上线则按需付费。
| 资源名称 | 规格 | 单价（元） |
|---|---|---|
| 华为云码道（CodeArts）代码智能体 | 体验版 | 免费 |
| 华为云AI Shell | 体验版 | 免费 |
| 应用部署上线至华为云服务器 | / | 按需付费 |
二、基础环境与资源准备
2.1 华为云码道安装部署
本案例基于华为云码道代码智能体完成开发改造，案例开始前请按照以下两步操作开通并使用工具：
2.1.1 一键开通华为云码道体验版
访问此专属开通链接，免费开通华为云码道（CodeArts）代码智能体体验版，无需复杂配置：
一键开通华为云码道体验版！
2.1.2 AI IDE华为云码道安装部署
参考案例《AI IDE华为云码道（CodeArts）代码智能体安装部署》完成Windows版AI IDE华为云码道（CodeArts）代码智能体安装部署。
2.2 华为云服务密钥配置
点击进入密钥配置页面，进行访问密钥的创建。
-
AK是Access Key（访问密钥）的缩写, 用于标识用户身份的唯一ID, 通常公开传输；
-
SK是Secret Key（秘密密钥）的缩写，用于生成请求签名的保密密钥，仅用户和服务端持有。其核心功能是通过对称加密机制验证请求发送者的合法性，防止未授权访问。
-
开发者配置AK/SK，等同于在AI Shell进行身份信息认证，从而可以在cli端对鸿蒙云手机进行操作。可以参考[获取AK/SK]文档。
三、通过码道开发任务看板
3.1 下载任务看板SKILL并导入码道
首先我们点击任务看板SKILL地址进行下载（zip包格式）。
接着我们打开华为云码道AI IDE客户端，按照以下步骤对任务看板SKILL进行导入。
选择我们刚刚下载好的zip包。
3.2 通过码道开发任务看板
导入成功后，在智能体模式下的码道对话框内发送以下提示词，让码道帮我们进行看板开发：
通过SKILL创建一个任务管理看板的应用并在本地启动
等待开发完成后，我们就可以看到在本地部署的应用了。
四、配置GitCode MCP Server并推送代码至代码仓
Gitcode MCP Server是Gitcode推出的模型上下文协议(Model Context Protocol)服务实现，旨在通过标准化协议将AI助手深度集成到代码管理流程中。它允许开发者通过AI编程工具直接操作代码仓库资源，实现智能化开发协作。
4.1 获取GitCode访问令牌
登录GitCode(如没有账号，点击注册)：
点击右上角个人头像 -> 个人设置，再点击访问令牌：
点击新建访问令牌，输入令牌名称，选择到期时间，新建访问令牌。
复制保存个人访问令牌，留作后面步骤使用：
4.2 安装并配置MCP Server
GitCode MCP Server地址为：https://gitcode.com/CaseLibrary/gitcode-mcp
可与码道对话安装GitCode MCP Server，在码道对话框输入以下提示词。
帮我安装这个mcp服务：https://gitcode.com/CaseLibrary/gitcode-mcp.git 并根据项目README.md文档安装gitcode-mcp,使用参数GITCODE_TOKEN=换成您自己的GITCODE访问令牌，GITCODE_TOOLSETS=all
4.3 进行GitCode代码推送
安装MCP Server后，我们已经能够通过码道与GitCode进行通信了，在码道对话框内输入以下提示词：
帮我创建一个名为task-kanban的代码仓，并把当前项目的全部文件进行推送
推送完成后可在gitcode平台看到代码已经推送成功！
如果想在推送过程中添加更多信息如署名信息等，可直接通过码道对话框自然语言对话的形式进行设置即可。
五、华为云AI Shell部署项目
登录开发者空间
5.1 进入AI Shell工作空间
点击右侧浮动窗口 AI Shell图标，启动云端作业环境
点击同意相关协议。
执行后进入AI Shell控制台，可输入自然语言命令进行交互，比如：「你是谁？你具备哪些技能？」等
5.2 通过AI Shell部署项目
当我们进入AI Shell工作空间后，就可以进行项目部署了，在AI Shell对话框内输入以下提示词并发送：
请基于源码地址 【此处换成您的GitCode代码仓地址】 分析项目代码，为此应用在华为云规划并创建一套可运行Web服务、支持远程登录、可扩展后端的轻量化极简架构云资源，并完成网站部署。
注意：提示词内需换成您的GitCode代码仓地址，或者用本案例源码代码仓：https://gitcode.com/CaseLibrary/task-kanban。
执行过程中会涉及一些敏感操作（写、执行、删除等操作），会弹出提示，询问用户是否允许该操作，请按需选择，本案例选择“Allow”
AI Shell将依次执行以下操作：
1、下载源码；
2、分析项目架构；
3、推荐部署方案。
方案生成后，根据AI Shell的指导需多次确认是否采用该方案继续操作，请在对话框进行确认。
显示部署成功后即可按照指引进行访问。
5.3 清除云资源（重要）
- 云服务器采用按需计费模式，体验完成后若不再使用，可通过自然语言命令释放本次创建的云资源，在对话框中输入
帮我清理掉刚刚创建的华为云资源
- 执行过程中会涉及一些敏感操作（写、执行、删除等操作），会弹出提示，询问用户是否允许该操作，请按需选择，本案例需选择“Allow”
- 云资源清理信息如下所示
云资源至此完成清理，可访问华为云资源列表予以验证。
六、其他操作
6.1 技能加载
- 访问[华为云Skills库]，选择对应技能，本案例以huawei-cloud-billing-scout为例
- 点击进入技能详情页面，复制加载命令，在AI Shell输入对应命令
6.2 快捷命令
- 在云端工作环境使用快捷命令“ctrl+p”，进入Commands命令行选择界面，请按需选择
七、反馈改进建议
如您在案例实操过程中遇到问题或有改进建议，可以到开发者论坛评论区反馈即可，我们会及时响应处理，谢谢！
扫一扫
19
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
