AI全民化培训-从零到一用AI盖一座软件大厦
演示文稿阅读镜像，共 20 页。动画、母版与备注请查看原文件。
第 1 页
从零到一
用AI盖一座「软件大厦」
一天学会编程基础 + AI辅助开发 + 从代码到上架全流程
AI全民化 · 企业内部培训
2026
第 2 页
课程概览
今日课程地图
就像盖房子一样，我们按步骤来
01
打地基
编程基础概念 · 变量/函数/循环/条件
02
画图纸
项目结构 · 文件夹与文件格式全解
03
砌砖墙
前端/后端/接口 · 代码怎么写
04
请AI工头
怎么和AI沟通 · 提示词工程
05
装修验收
软件打包 · 测试 · 上架发布
06
交付入住
网站/App/EXE/鸿蒙 全平台发布
2 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 3 页
为什么用类比
为什么用「盖房子」来理解编程？
🏗️
地基
编程语言基础
📐
图纸
项目结构设计
🧱
砖块
代码文件
🔗
水泥
接口/API连接
🎨
装修
前端UI美化
✅
验收
测试与打包
🏠
交房
上线发布
🔧
物业
运维与更新
3 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 4 页
打地基
变量 = 房间里的储物柜
变量就是用来存放数据的「柜子」，不同类型的柜子放不同的东西
数字 (Number)
放数字的柜子
let age = 25;
字符串 (String)
放文字的柜子
let name = “张三”;
布尔 (Boolean)
开关灯的按钮
let isOpen = true;
数组 (Array)
多格储物架
let list = [1, 2, 3];
对象 (Object)
带标签的抽屉
let user = {name: ‘李四’};
空值 (null)
空柜子
let empty = null;
4 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 5 页
打地基
函数 = 工人的操作手册
函数是一段可重复使用的指令，就像工人的操作手册——输入材料，输出成品
函数的定义与调用
// 定义函数（写操作手册） function 砌墙(砖块数) { return 砖块数 + ‘面墙砌好了’; }
// 调用函数（工人按手册干活） let 结果 = 砌墙(10);
条件与循环
// 条件判断（如果下雨就停工） if (天气 === ‘下雨’) { 停工(); } else { 继续施工(); }
// 循环（砌100块砖） for (let i = 0; i < 100; i++) { 砌一块砖(); }
5 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 6 页
画图纸
项目结构 = 房子的设计图纸
每个文件夹就像房子里的一个房间，各有各的用途
src/
主卧室 — 核心代码
所有源代码都在这里
public/
客厅 — 公共资源
图片、图标、HTML入口
components/
家具间 — 可复用组件
按钮、卡片、导航栏等
pages/
各楼层 — 页面
首页、关于页、设置页
api/
管道间 — 接口
和后端通信的管道
assets/
仓库 — 静态资源
图片、字体、样式文件
utils/
工具箱 — 工具函数
格式化、计算等辅助功能
config/
配电箱 — 配置
环境变量、构建配置
6 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 7 页
画图纸
文件格式 = 建材的种类
不同建材盖不同部位，不同文件格式写不同内容
.html
钢架结构
页面的骨架结构
.css
外墙涂料
颜色、大小、布局美化
.js
电路系统
交互逻辑与动态行为
.json
材料清单
数据配置与交换格式
.vue/.jsx
预制板
组件=结构+样式+逻辑合一
.ts
加固钢筋
TypeScript=JS+类型安全
.md
施工日志
文档说明、README
.env
保险柜
密钥、密码等敏感配置
7 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 8 页
砌砖墙
前端 = 房子看得见摸得着的部分
HTML
墙体结构
定义页面有哪些元素：标题、段落、按钮、图片
就像墙上的门、窗、隔断
CSS
装修风格
定义元素外观：颜色、大小、间距、动画
就像壁纸、地板、灯光
JavaScript
智能系统
定义交互行为：点击响应、数据更新、动画
就像感应灯、自动门、电梯
8 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 9 页
砌砖墙
后端 = 房子的地下管道和供电系统
用户看不见，但没有它房子无法运转
服务器
物业中心
接收请求、返回响应的中央处理单元
数据库
地下仓库
存储所有数据：用户信息、订单、内容
API接口
快递通道
前后端通信的桥梁，数据的出入口
认证授权
门禁系统
登录验证、权限控制、安全保障
9 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 10 页
砌砖墙
API接口 = 快递通道
前端通过API向后端「下单」，后端「发货」返回数据
HTTP方法 = 快递类型
GET
查看快递 — 获取数据，不修改
POST
寄出快递 — 创建新数据
PUT
修改快递 — 更新已有数据
DELETE
退回快递 — 删除数据
JSON = 快递单格式
// 请求（下单） { “name”: “张三”, “room”: “301” }
// 响应（发货） { “status”: “success”, “data”: {…} }
10 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 11 页
请AI工头
和AI沟通 = 给工头下指令
提示词越清晰，AI「盖的房子」越符合你的要求
❌ 模糊指令
“帮我做个网站”
问题： • 做什么类型的网站？ • 给谁用的？ • 需要哪些功能？ • 用什么技术栈？
✅ 清晰指令
“用Vue3+Element Plus做一个 员工管理系统，包含：
- 登录页面
- 员工列表（支持搜索分页）
- 新增/编辑员工弹窗
- 对接REST API“
11 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 12 页
请AI工头
提示词工程 = 施工任务书
1
角色设定
你是一个10年经验的前端工程师
2
任务描述
请帮我开发一个XX功能的页面
3
技术约束
使用Vue3 + TypeScript + Element Plus
4
输出要求
给出完整代码，包含注释说明
5
参考示例
参考这个效果：[附截图或链接]
核心原则：像给新员工写需求文档一样写提示词——越详细越好
12 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 13 页
装修验收
软件打包 = 验收封装
代码写好了，需要「打包」才能交付使用——就像装修完要验收、办证
1
安装依赖
npm install
采购建材 — 下载项目需要的所有第三方库
2
编译构建
npm run build
施工建造 — 把源代码编译成浏览器/系统可运行的文件
3
压缩优化
自动完成
精简装修 — 压缩代码、图片，减小体积加快加载
4
生成产物
dist/ 文件夹
交付钥匙 — 最终可部署的文件包
13 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 14 页
装修验收
打包产物 = 交房清单
构建后dist/文件夹里每个文件的作用
index.html
入户大门
入口页面，浏览器第一个加载的文件
assets/*.js
电路走线
编译后的JavaScript逻辑代码
assets/*.css
装修方案
编译后的样式表
assets/*.png/jpg
装饰画
图片资源
favicon.ico
门牌号
浏览器标签页小图标
manifest.json
房产证
PWA配置，声明应用信息
14 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 15 页
交付入住
网站上线 = 房子挂门牌号
让别人能通过网址访问你的「房子」
1
买域名
选门牌号
如 myapp.com，在阿里云/腾讯云购买
万网/Namesilo
2
租服务器
租地皮
云服务器ECS 或 静态托管
阿里云/Vercel/Netlify
3
上传文件
搬家具
把dist/文件上传到服务器
scp / FTP / CI自动部署
4
DNS解析
挂门牌
域名指向服务器IP地址
A记录 / CNAME
5
配HTTPS
装安保
SSL证书，让访问更安全
Let’s Encrypt 免费
15 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 16 页
交付入住
做App = 盖移动版小别墅
网站包一层「壳」就变成了App
原生App
独栋别墅
用Java/Kotlin(Android)或Swift(iOS)直接开发，性能最好，成本最高
Android Studio / Xcode
混合App
精装修公寓
网页+原生壳，一套代码两端运行，性价比最高
UniApp / Capacitor / Cordova
跨平台App
模块化房屋
用一套框架生成原生组件，接近原生体验
React Native / Flutter
16 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 17 页
交付入住
做EXE = 盖Windows版独立屋
把网页应用打包成Windows可执行程序
Electron 方案
= 网页 + 浏览器壳
- npm install electron –save-dev
- 配置 main.js (窗口大小等)
- npm run build (打包)
- 生成 .exe 安装包
Tauri 方案 (更轻量)
= 网页 + 系统原生壳
- npm create tauri-app
- 前端用Vue/React开发
- cargo tauri build
- 生成 .exe / .msi
类比：Electron = 带装修的精装房(大) | Tauri = 毛坯+自装(小而快)
17 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 18 页
交付入住
做鸿蒙App = 盖大型科技企业智慧屋
鸿蒙(HarmonyOS) — 大型科技企业自研操作系统，一次开发多端部署
鸿蒙开发核心概念
开发语言
ArkTS (TypeScript扩展)
(施工语言)
开发框架
ArkUI (声明式UI)
(施工方法)
开发工具
DevEco Studio
(施工工具)
打包格式
.hap (HarmonyOS Ability Package)
(交房封装)
核心概念
Ability = 一个功能模块
(房间)
发布渠道
大型科技企业应用市场 (AppGallery)
(房产中介)
18 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 19 页
全流程
从代码到用户手中 — 完整流程
💻
写代码
施工
→
📋
版本管理
施工记录
→
📦
构建打包
验收封装
→
🔍
测试
质检
→
🚀
部署上线
交房
→
🏠
用户使用
入住
关键工具速查
VS Code (编辑器)
Git (版本管理)
npm/yarn (包管理)
Vite/Webpack (构建)
Jest (测试)
Docker (容器化)
Nginx (服务器)
CI/CD (自动化)
19 / 20
AI全民化培训 — 从零到一：用AI盖一座软件大厦
第 20 页
今天你学会了
用AI盖一座软件大厦
▸ 编程基础 = 盖房子的地基（变量/函数/循环/条件）
▸ 项目结构 = 设计图纸（每个文件夹都有明确用途）
▸ 前端后端 = 看得见的装修 + 看不见的管道
▸ API接口 = 快递通道（JSON是快递单格式）
▸ AI沟通 = 给工头写清晰的施工任务书
▸ 打包发布 = 验收交房（网站/App/EXE/鸿蒙）
下一步：打开AI助手，说出你的第一个需求，开始盖你的软件大厦！