VS Code+HBuilderX-用AI创建APP

根据我个人实际尝试，这个“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 文件)：

搜索并安装 Vue - Official (即 Volar)。这是 Vue3 必备。
搜索并安装 uni-app-snippets (可选，提供一些 uni 的代码提示)。

现在，你在 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
    }
}