企业官网建设流程全解析

零基础做第一个 App，这个概念放在三年前还是一句劝退话：你得先花两三个月学编程语法，再弄明白前端、后端、数据库分别是什么，然后才有资格写一个能跑的东西。现在用 AI 编程工具，路径被压缩得很短。我见过完全没写过代码的人，用 Cursor 这类 AI 编辑器，从零做出了能打开、能操作、能发给朋友试用的记账 App。

这篇保姆教程就按这条路线完整拆开：项目怎么选、工具怎么装、需求怎么描述、报错怎么处理、最后怎么发布。全程默认你没有任何编程基础，但我会把每一步背后的原因也说清楚。AI 编程不是魔法，它解决的是“写代码”这个环节，而你需要解决的是“说清楚需求”和“验收结果”这两个环节。把这两件事做好，你的第一个 App 就能稳稳落地。

1. 先想清楚：AI 编程能帮你做成什么样，不能替你决定什么

1.1 你的第一个 App，最合适是什么形态

“App”这个词在很多人心里等于手机上那个图标，但做第一个项目时，形态选择比功能设计更重要。不同形态的开发成本、发布流程和上手难度差很多。

我个人强烈建议：第一次做，选网页 App。原因很简单，网页 App 不用处理安装包、签名、审核这些和业务无关的流程，浏览器打开就能用。等你把功能逻辑跑通、确认自己确实喜欢这个过程，再考虑套壳打包或做小程序，难度会低很多。

1.2 AI 编程的真实能力边界

AI 编程能干的活，很多人已经刷到过：生成代码、解释报错、重构逻辑、补测试用例、把一段描述变成可运行页面。这些都是真的。但它不是全能架构师，有几个明显边界你心里要清楚。

第一，它不能猜需求。你说“帮我做个 App”，它只能给你一个通用模板。你说“我要一个每天记录三本书阅读页数的工具，数据要本地保存，界面要适合手机竖屏”，它才能给你对的东西。

第二，它不能验证业务逻辑。代码跑起来没报错，不代表逻辑正确。比如记账 App，你输入的金额会不会被错误累加，刷新后数据还在不在，删除一条记录后合计是否更新——这些都要你自己去点、去验。

第三，它不能替你解决环境问题。AI 给你的依赖版本、启动命令、配置项，是基于它训练时的通用经验，不一定适配你本机的系统、Node 版本和网络条件。所以你会遇到不少“代码看起来没问题但就是跑不起来”的情况，这不是 AI 不行，是环境匹配问题。

把 AI 编程理解成“有问必答、改得很快的实习程序员”，你的心态会稳很多。它负责执行，你负责验收。

2. 动手前的准备：项目选择、工具清单和环境安装顺序

2.1 第一个项目怎么选，才不会做到一半放弃

很多零基础用户失败，不是不会用 AI，是项目选太大了。第一次做 App，项目要满足四个条件：

• 是给自己用的，不需要考虑多人同时使用；
• 页面不超过五六个，逻辑能在一张纸上画清楚；
• 数据量小，用浏览器本地存储就够用；
• 你确实需要它，这样你才有动力反复调试。

按这个标准，推荐这几个方向：每日记账、待办清单、背单词卡片、个人作品集、宠物喂养记录、跑步打卡。它们看起来不起眼，但每个都覆盖了“增删改查、数据保存、界面交互”这些编程里最核心的内容。

不推荐作为第一个项目的是这些：带支付功能的商城、带实时位置的网约车类 App、带即时通讯的社交软件。这类项目涉及账号体系、支付资质、服务器、审核规则，业务复杂度远超一个新手能控制的范围。等你有经验了再碰不迟。

2.2 零基础需要准备哪些工具

做第一个 AI 编程项目，工具其实很少，四样就够。

第一是 AI 编程工具。目前最主流的方式是用 Cursor 这类把 AI 对话和代码编辑器集成在一起的工具。它能在同一个窗口里看到项目文件、运行结果和 AI 回复，对零基础非常友好。不想装桌面软件的话，用网页版 AI 对话工具生成代码，再把代码复制到 VS Code 里，也是一条可行路线。两种方案都能做出 App，差别只在效率。

第二是代码编辑器。如果你用 Cursor，它本身就带编辑器功能，不用额外装。如果走“网页对话 + 本地编辑器”路线，装一个 VS Code 就行。

第三是运行环境 Node.js。这是很多现代前端项目的基础，AI 生成的代码很多需要靠它来安装依赖和启动本地服务。

第四是浏览器，Chrome 或 Edge 都行，用来预览效果。

部分 AI 工具需要注册账号，有些高级功能需要付费，但第一步学习通常用免费额度或基础版就够。具体以对应工具的官网提示为准。

2.3 为什么必须先装 Node.js，而不是直接开始写代码

很多新手不理解：我不是要写代码吗，为什么先装一个运行环境？

因为 AI 生成的前端项目，大部分是基于 Node.js 生态的。项目里要安装的依赖包、要执行的启动命令、要启动的本地开发服务器，全都依赖 Node.js。你可以把 Node.js 理解成一套“能让代码在电脑上跑起来的基础设施”。不装它，AI 给你的代码就只是一堆文本文件。

安装完成后，在终端里输入node -v，能看到版本号就说明装好了。这一步不需要理解原理，先确认环境可用。

2.4 推荐的安装顺序和第一个动作

我建议按这个顺序操作，每做完一步都确认一下：

1. 下载并安装 Node.js 的 LTS 长期支持版本；
2. 打开终端，输入node -v，能看到版本号；
3. 安装 Cursor 或 VS Code；
4. 新建一个文件夹，命名成你的项目名，比如my-first-app；
5. 用编辑器打开这个空文件夹；
6. 在 AI 对话窗口里，直接说出你的需求。

这里有个心态提醒：不要在动手前把所有编程概念都学一遍。AI 编程的学习方式，是先跑通，再补课。你只需要知道“文件”“文件夹”“终端命令”这几个基本概念，就可以开始了。

3. 用一条高质量提示词，让 AI 从 0 搭出第一个页面

3.1 提示词不是聊天，是需求说明书

很多新手上来就说“帮我做一个 App”，然后抱怨 AI 做出来的东西不是自己想要的。问题不在 AI，在于需求没有表达清楚。AI 编程提示词的核心，是把它当成一份需求说明书来写。

一段好用的提示词，通常包含五个部分：角色、目标、功能列表、技术建议、界面约束。角色告诉 AI 它该站在什么角度工作；目标说明做什么；功能列表是可验收的清单；技术建议控制实现复杂度；界面约束让输出更符合你的使用场景。

我一般会用这样的模板：

你是一个前端开发工程师。请帮我做一个“每日记账”网页 App。 功能要求： 1. 可以添加一笔支出，字段包括金额、分类、备注、日期； 2. 可以按日期查看支出列表； 3. 可以删除一条记录； 4. 数据保存在浏览器本地，刷新页面后不丢失。 技术要求：先用单个 HTML 文件实现，包含 HTML、CSS、JavaScript，界面适合手机竖屏。

这段提示词的关键词是“单个 HTML 文件”。对零基础来说，这一步直接把项目复杂度降到最低：不需要安装任何依赖，把代码保存成index.html，双击用浏览器打开就能看到效果。等以后项目复杂了，再让 AI 生成多文件项目也不迟。

3.2 拿到 AI 生成的代码后，怎么运行起来

如果你按照上面的方式，让 AI 生成单个 HTML 文件，运行方式非常简单：在编辑器里新建一个index.html，把 AI 给的代码粘贴进去，保存，然后在文件夹里双击这个文件，浏览器就会打开你的第一个 App。

如果 AI 生成的不是单个文件，而是一个完整项目，那通常需要在终端执行命令。常见的两类命令是：

npm install

安装项目依赖，只需要运行一次。

npm run dev

启动本地开发服务器，运行后终端会显示一个类似http://localhost:5173的地址，在浏览器打开就行。

这里容易踩的一个坑是：命令要在项目目录里执行。AI 给了你命令，你要先确认终端的当前目录已经切换到了项目文件夹，否则会提示找不到配置文件。绝大多数“启动不了”的问题，不是代码有问题，而是目录不对、依赖没装、Node 版本不匹配。

3.3 第一次验收，看四个动作

第一次跑通之后，不要急着加功能。先做一次完整的验收，确认四件事：

1. 页面能正常打开；
2. 添加一笔支出后，列表里出现了这条记录；
3. 刷新浏览器，记录还在；
4. 点删除按钮，记录能消失。

这四条都满足，说明你的第一个最小可用版本已经完成。这时候你已经有资格说：我做出来的 App 是能跑的。接下来的工作，就是在这个基础上让它变得更好用。

4. 从“能跑”到“能用”：功能迭代、数据存储和交互细节

4.1 功能迭代要“小步快走”，一次只加一个需求

能跑之后，很多人会急着把 AI 当成许愿机，一口气让它加上统计图、预算提醒、多账户切换、云端同步。千万别这么做。功能越多，代码越复杂，一旦出错，你根本判断不了是哪个环节的问题。

正确做法是一次只加一个功能。比如记账 App 做完基础版之后，可以这样推进：

• 先加“月度合计”，让列表底部显示当月总支出；
• 跑通之后，再加“按分类筛选”；
• 再之后，加“修改记录”的功能；
• 最后，加一个简单的统计视图。

每次只改一小块，验证完再进入下一步。这样做的好处是，出错时问题范围很小，你知道刚才改了什么，可以把报错信息和改动内容一起发给 AI，修复效率高很多。我见过最稳的零基础选手，不是一次要得最多的，而是每次只提一个小需求，反复验证。

4.2 本地存储什么时候够用，什么时候需要后端

你的第一个 App，数据大概率不需要服务器。浏览器自带的本地存储（localStorage）就能满足“刷新页面数据不丢”这个要求。它的优点是简单，代码量少，不依赖任何外部服务；缺点是数据只在当前浏览器里，换个设备、换个浏览器就看不到了。

什么时候需要后端？当你有这些需求时再考虑：数据要在手机和电脑之间同步；要给多个用户使用；要管理登录账号；要做复杂的数据分析。这些属于第二个阶段的事，不要在第一个项目里强行上。

AI 编程里有一个概念叫“需求驱动复杂度”：需求的复杂度决定架构的复杂度，而不是为了练技术主动增加复杂度。你的第一个 App，能把本地数据管好，就已经成功了。

4.3 报错信息怎么发给 AI，效率才最高

零基础用户遇到报错，最常见的反应是复制一行报错开头，然后问“这是怎么回事”。AI 能回答，但要猜的东西太多。我建议把报错信息当成侦探线索，完整提供。

一个高效的报错反馈格式是：

你刚才帮我生成的代码，运行时出现了以下错误： （把完整报错信息粘贴到这里） 我的操作步骤是：先打开页面，然后点击“添加”按钮。 我的环境是：Windows 11，Node.js 20。

这样 AI 知道三件事：代码是什么、操作到哪一步出的问题、运行环境是什么。如果你只会说“不行，报错了”，AI 只能靠猜。

这里要给零基础用户提个醒：报错信息不是“失败了”的标志，而是最重要的调试线索。报错越长，信息量越大，越要完整贴给 AI。AI 大模型在处理这类错误时，恰恰需要完整上下文。

4.4 交互细节怎么验收，才算“能用”

“能跑”和“能用”之间差着一层交互细节。我一般会建议零基础用户用“笨办法”验收：把自己当成一个完全不懂的人，反复点每个按钮，看是否有异常。

重点检查这几个场景：

• 输入框为空时点“保存”，会不会报错；
• 输入金额是负数或零，程序怎么处理；
• 列表为空时，页面有没有提示，还是一片空白；
• 连续快速点击“保存”两次，会不会出现重复数据；
• 删除记录后，列表合计有没有同步更新。

这些场景 AI 不一定帮你想到，但你可以让 AI 帮你检查。你甚至可以在对话里说：“请从测试人员的角度，列出我这个功能可能存在的边界情况。”这时候 AI 就变成了你的测试搭子。让它检查代码里有没有处理这些边界，你负责实际点击验证，这是零基础阶段很实用的一套配合方式。

5. 零基础最容易踩的坑：启动失败、依赖报错、路径问题和异步逻辑

5.1 启动失败，先查三类原因

本地项目跑不起来，大多数情况下不是代码逻辑错，而是三类环境问题。

第一，运行命令没有在项目目录里执行。终端里所谓的“当前目录”，可能和项目文件所在的目录不是同一个。你要先用命令切换到项目文件夹，比如cd my-first-app，再执行npm run dev。这个步骤看起来基础，但零基础出错率极高。

第二，Node 版本和依赖版本不匹配。AI 生成的代码可能依赖某个新版本特性，而你装的是很老的 Node.js，就会报语法或模块相关的错误。解决方案是手动确认自己的 Node 版本，然后让 AI 根据你的版本调整依赖，或者把 Node.js 升级到 LTS 最新版。

第三，端口被占用。如果你看到类似port 3000 is already in use的提示，说明这个端口已经被其他程序占了。可以换一个端口启动，也可以结束占用进程。最简单的做法是问 AI：“我的端口被占用了，帮我换一个端口启动。”它会给对应的命令。

5.2 依赖安装失败，按顺序排查

npm install失败是另一个高频问题。遇到时不要反复重试，按这个顺序排查：

1. 确认有网络连接；
2. 删除项目里的node_modules文件夹和 lock 锁文件；
3. 重新执行npm install；
4. 如果下载速度很慢或超时，可以考虑把 npm 源切换成国内镜像源，这是开发中很常用的做法；
5. 还不行，就把完整报错信息贴给 AI，让它判断是版本冲突还是依赖不存在。

删除node_modules再重装，听起来很粗暴，但它确实能解决大量“依赖处于半安装状态”的脏问题。这个操作在开发圈里很常见，你以后用多了就会习惯。

5.3 AI 生成的代码完全不对，别急着说“重写”

有时候 AI 给出的代码和你想象的不一样。这时候很多新人会直接说“不对，重写”。我建议先停下来，做三件事：

先描述差异。告诉 AI：“你生成的界面在当前页面的最顶部，我希望它在中间部分。”这种具体差异，AI 能立刻修改。

再让它解释逻辑。如果你看不懂代码，可以让它用大白话解释这段代码的流程。这不仅能帮你判断它是否理解对了需求，也是在给自己补课。

最后给最小复现。如果某个功能不生效，不要只说“这个按钮没反应”，要描述“我点击了页面上的保存按钮，没有任何提示，也没有数据出现”。信息越准确，AI 的修改越精准。

5.4 看到异步代码别慌，这是高级话题也是常见坑

AI 生成的代码里，你会经常看到async、await、Promise这些词。第一次见到，很多人会以为是自己操作错了。其实这属于“异步编程”的范畴，简单理解就是：有些操作不会立刻返回结果，比如读取本地存储、请求外部接口，程序需要等它完成后再继续往下走。

不用深入研究，但至少要认识它。因为很多“功能没生效”的问题，根源就是异步操作没有按预期顺序执行。你不需要会写，但你得会在报错时把“这里用了 await”这个信息告诉 AI，它能加快定位。等你的第一个 App 做完，再花点时间补一补异步编程的基础，看代码会轻松很多。

6. 第一个 App 做完之后：手机预览、发布成网页、打包成安装包

6.1 让手机也能访问你做的 App

做完网页 App 后，你最想做的事情大概率是：能不能在手机上打开看看？能。

最直接的办法是局域网预览。把电脑和手机连到同一个 Wi-Fi，在启动本地开发服务时，让服务监听局域网地址。比如很多项目支持这样的启动方式：

npm run dev --host

然后终端会显示一个电脑在当前局域网的 IP 地址，类似http://192.168.1.100:5173。手机浏览器输入这个地址，就能看到你做的 App。第一次访问时，电脑防火墙可能会弹窗，选择允许即可。

这个方案只适合自己体验，不适合让别人在其他网络下访问。因为 IP 地址只在当前局域网有效，换到公司网络或 4G 网络就打不开了。

6.2 发布成网页 App，最快上线的方式

如果你想把这个 App 发给不同网络下的朋友用，就需要把它部署到公网上。对网页 App 来说，最常用的方式是使用静态托管平台。

基本流程是这样的：把代码推送到 GitHub 仓库，然后在主流的静态托管平台上导入这个仓库，平台会自动完成构建，最终给你一个公网网址。以后你更新了代码，推送上去，网址上的内容也会自动更新。

这些平台的界面和配置项会经常改版，具体操作要以平台当时的引导为准。但核心流程不变：代码入仓库、平台自动构建、得到一个网址。第一次部署时，把 AI 当成操作手册，你在哪一步卡住，就把界面截图或平台名称发给它，它会给你对应步骤。

6.3 打包成安卓 App，可以走的两条路

网页 App 跑通之后，很多人会想要一个真正的安装包。大致有两条路。

一条是用跨端框架，把网页项目打包成安卓应用。这类工具能生成 APK 安装文件，有些还提供云打包服务，不需要你本地配置安卓开发环境，对零基础更友好。但要注意，云打包通常有排队和包体大小限制，具体以你使用的工具说明为准。

另一条是用 Android Studio 装一个完整的安卓开发环境，自己打包。这条路更专业，也更稳，但环境配置复杂，新手容易在下载和配置阶段卡很久。

我的建议是：第一个项目阶段，不要急着打包。网页 App 同样能完整验证你的想法。等第二个、第三个项目都跑顺了，再考虑打包成安装包。打包这件事本身没有难度，难度在于你有没有准备好处理各类打包报错。

6.4 App 发布上架的事，提前知道但别提前做

应用商店上架和网页部署是两回事。无论安卓还是 iOS，上架应用商店通常都需要注册开发者账号、提交隐私政策、通过审核。iOS 应用商店还需要 Mac 环境和 Apple 开发者账号，门槛更高。

这些流程不用在第一个项目里全部走完。你只需要知道：网页部署是门槛最低的上线方式，适合快速验证；应用商店上架是正式发布，适合产品形态已经稳定的阶段。第一次做 App，别把精力耗在上架资质和审核流程里。

7. 第一个 App 不是终点：后续学习路线和长期开发习惯

7.1 建议补的三块基础，不用深，但要有

做完第一个 App 后，你会对自己的知识缺口有很具体的感知。这时候补课效率最高，因为你知道为什么学。

第一块是 HTML 和 CSS 基础。它们决定页面的结构和样式，你不需要背所有标签，但要看得懂 AI 生成的代码里div、class、style大概是什么意思。

第二块是 JavaScript 基础。变量、函数、数组、对象、条件判断，这些概念是 AI 编程对话里最常见的词汇。你不需要能独立写，但看得懂之后，和 AI 沟通的效率会翻倍。

第三块是“前端、后端、数据库”这三个词的含义。前端是用户看到的界面，后端是处理数据的服务，数据库是存数据的仓库。理解了这三层，你就能听懂 AI 在生成代码时说的很多话。

“写编程的人是什么职业”这个问题，也可以在这个阶段真正理解了。做前端的人、做后端的人、做全栈的人，工作内容差异很大。你用 AI 编程做 App，实际上是在体验一个全栈工程师的简化版工作。

7.2 适合第二、第三个项目的进阶方向

第二个项目，可以尝试比记账 App 多一个复杂点的小工具。比如接一个公开接口，做一个天气查询 App，或者做一个汇率换算 App。这个阶段你会学到“网络请求”和“异步编程”这两个新概念，虽然刚开始容易绕晕，但这是从自用工具走向真实应用的重要一步。

第三个项目，可以尝试做一个简单小游戏。游戏对界面反馈和逻辑判断要求更高，能把你在前两个项目里学到的东西串起来。网上有很多用编程做小游戏的练习项目，可以参考但不能照搬，最好是让 AI 根据你的想法生成一套新玩法。

如果你对硬件有兴趣，以后可以尝试用蓝牙让手机 App 控制 ESP32 这类开发板，做一个开关灯、读取传感器的小项目。那是很不错的进阶路线，但不适合第一个项目，因为硬件联调的不确定性比纯软件高得多。

7.3 长期开发要养成的四个习惯

第一，每个项目单独建一个文件夹，命名清楚。别把所有代码堆在同一个目录里，否则三个月后你根本分不清哪个项目是哪个。

第二，把代码放到 GitHub 仓库里。这不只是备份，更是给自己留一条“改坏了可以回退”的后路。让 AI 帮你生成.gitignore文件，把node_modules等临时目录排除掉。

第三，每个项目写一个README.md，记录启动命令和注意事项。下次你打开项目，不需要重新问 AI 怎么运行。

第四，每次让 AI 改代码之前，先手动复制一份当前能跑通的版本。可以用文件备份，也可以在 Git 里提交一次。这样改坏了，你能立刻回到稳定状态。

7.4 最后留几个自查点

如果你准备开始动手，把它当成自己的项目检查清单：

• 我选的项目是不是足够小，小到能在几天内跑通；
• 我能不能用一段话说明白这个 App 的完整需求；
• 我的第一个版本是不是只包含最核心的几个功能；
• 遇到报错时，我是不是先把完整报错信息收集好了；
• 每次加新功能前，我是不是已经验证过旧功能是稳定的；
• 我能接受的第一个成果，是不是就是“本地能打开、数据不丢、能发给朋友看”。

这些问题想清楚，你的第一个 App 大概率不会烂尾。AI 编程最奇妙的地方在于：它把“写代码”的门槛降得足够低，但把“想清楚自己要什么”这件事，重新交回到了你自己手里。这才是零基础做出第一个 App 真正需要的准备。