根据我个人实际尝试,这个“VS Code (编写 + claude4 AI辅助) + HBuilderX (编译 + 调试)”的组合是目前编程小白 UniApp 开发最高效的模式。
适合懂点框架但是不会写代码的新手宝宝食用,只需要创建项目,将你的想法依次发送给AI,你的APP便会被一点点AI出来。
VS Code: 拥有最强的 AI 插件生态(Claude/Copilot),代码补全和编辑体验一流。
HBuilderX: 拥有最强的 UniApp 编译器和真机调试通道。
其实用HBuilderX+Cursor或者HBuilderX+Trae solo也是可以实现的,具体可以根据自己的喜好去尝试。
在这里提一句,来细看这篇文章的朋友基本都是编程小白或者AI学习者,想用AI做出点成果,根据我用AI编程的经验来说,各大博主或者营销号所说的一句话生成一个app,或者一个网站目前来看还是基本不可能(排除生成个简单的H5页面或者简单的展示APP),因为在全AI编程中你也会遇到程序报错、格式错乱等等问题,所以进一步的能力就是让AI通过输出报错信息给自己纠错。
下面我手把手教你如何配置这个“左右互搏”编程组合:
🛠️ 第一步:用 HBuilderX “生孩子” (创建项目)
虽然我们要用 VS Code 写代码,但千万不要用 VS Code 创建 UniApp 项目(结构容易缺东西)。
打开 HBuilderX。
点击左上角 文件 -> 新建 -> 项目。
选择 uni-app,模板选择 默认模板 (Vue3) (现在的 AI 对 Vue3 支持更好)。
项目名称填
lovelog-uniapp,路径选一个你熟悉的文件夹。点击创建。
⚡ 关键动作:安装 UI 库 (uView Plus)
打开DCLOUD 插件市场 https://ext.dcloud.net.cn/。
搜索
uview-plus(Vue3 版本叫 uview-plus)。点击“使用 HBuilderX 导入插件”。
按照 uView 文档,做简单的引入配置,参照官方文档(这一步如果不会,可以一会直接让 Claude 帮你写配置代码)。
在 main.js 中引入 uview-plus
在 App.vue 中引入 uview-plus 基础样式
在 uni.scss 中引入 uview-plus 的 scss 变量
在 pages.json 中配置 easycom 规则
🔗 第二步:用 VS Code “养孩子” (编写代码)
这是你以后 90% 时间待的地方。
打开 VS Code。
点击 File -> Open Folder (打开文件夹)。
注意:选择刚才 HBuilderX 创建的那个 lovelog-uniapp 文件夹。
安装必备插件 (让 VS Code 读得懂 .vue 文件):
现在,你在 VS Code 里看到的目录结构应该和 HBuilderX 里是一模一样的。
🔄 第三步:建立“热更新”循环
这是最爽的一步。你不需要手动同步代码,因为它们改的是同一个硬盘文件。
启动调试服务 (HBuilderX):
手机用 USB 线连上电脑(打开开发者模式 -> USB 调试)。
在 HBuilderX 里选中项目,点击顶部菜单 运行 -> 运行到手机或模拟器 -> 选择你的手机。
等待手机上自动安装并打开基座 App (HBuilder)。
开始编程 (VS Code + Claude):
在 VS Code 里打开
pages/index/index.vue。召唤 Claude (在侧边栏或 Chat 窗口)。
Prompt: "我是 UniApp Vue3 + uView Plus 环境。请帮我把首页改成一个日历页面,顶部显示‘恋爱 520 天’,使用 u-navbar 和 u-calendar 组件。"
Claude 生成代码后,直接点击确认 或复制粘贴到文件里。
自动同步:
在 VS Code 按
Ctrl + S保存。👀 此时你看一眼 HBuilderX 的控制台,它会自动检测到文件变化,进行增量编译。
📱 你的手机屏幕会瞬间刷新,显示出 Claude 刚写的界面。
💡 第四步:给 Claude 的“调教”指令 (Prompt 技巧)
为了让 VS Code 里的 Claude 写出 HBuilderX 能完美运行的代码,你需要在会话开始时给他注入“系统设定”:
复制这段话发给 Claude:
我正在开发一个 UniApp 项目,运行在微信小程序和 Android App 端。 技术栈: Vue 3 (Composition API / Setup 语法糖) + Vite。 UI 框架: 使用 uView Plus (uview-plus) 组件库,请优先使用 u-button, u-cell 等组件。 样式: 使用 SCSS。 注意事项: 避免使用 window 或 document 对象,因为这是 App 环境。使用 uni.navigateTo 代替路由跳转。
🚧 第五步:处理两个编辑器的“冲突”
为了防止 VS Code 变卡或报错,建议在 VS Code 根目录建一个 .vscode/settings.json,屏蔽掉 HBuilderX 的编译产物:
{
"files.exclude": {
"**/.git": true,
"**/unpackage": true, // HBuilderX 的编译输出目录,VS Code 不需要看
"**/node_modules": true
},
"search.exclude": {
"**/unpackage": true
}
}🚀 总结你的操作流程
早上开工:
打开 HBuilderX -> 运行 -> 运行到手机 (手机亮屏,放旁边支架上)。
打开 VS Code -> 唤醒 Claude。
写代码:
在 VS Code 问 Claude:“帮我写个地图打卡页面”。
Claude 输出代码 -> 粘贴 -> 保存。
看效果:
转头看手机,界面已经出来了。
调试:
如果手机上报错,看 HBuilderX 的控制台,那里会有详细的红字报错信息。
把报错信息复制回 VS Code 发给 Claude:“报错了,帮我修”。
















还没有评论,来说两句吧...