网站开发20年：从手工编码到AI辅助建站全解析

还记得第一次接触网站开发时我做的第一个页面是把 HTML、CSS、JS 都写在一个文件里再用 FTP 传到虚拟主机。那时没有构建工具没有框架更没有 AI 补全代码。每次改样式都要刷新整个页面每报一个错都要从浏览器控制台往上倒推。二十年后同样的“做一个网站”这件事已经变成了“打开编辑器用自然语言描述需求让 AI 生成组件再人工检查调整”。这二十年网站开发经历了从手工编码到工程化再到 AI 辅助生产的完整演进。这篇文章会以技术演进为主线结合可运行的代码示例把旧时代的基础设施、中间时代的工程化变革以及当下 AI 建站的工作流完整拆开来看。文章适合两类读者一是想理解网站开发底层原理、准备系统学习前端全栈的新人二是已经有一定开发经验正想把 AI 工具真正落进项目里的工程师。1. 网站开发20年三个技术时代1.1 手工时代每行代码都来自程序员网站开发的“手工时代”大约对应 Web 1.0 到 LAMP 架构流行的那些年。典型形态是一个 Apache 服务器加 PHP再加一个 MySQL 数据库。前端页面大多由服务端脚本动态拼接 HTMLJS 只负责表单校验或简单交互。程序员要手工管理页面模板、数据库连接、表单提交、文件上传每一条路由、每一个参数、每一次 SQL 查询都要自己写。那个阶段的核心能力要求很清晰懂 HTML 结构、懂 CSS 布局、懂一门后端语言、懂 SQL 基本语法。虽然技术栈简单但研发效率很低因为整个流程都在“重复造轮子”。不同页面之间公共的头部、尾部、导航栏只能通过 include 或模板继承来复用改一个公共组件往往要联动多个页面。下面是一个典型的 PHP 手工站点页面?php // 文件路径index.php require_once config.php; $pdo new PDO( mysql:hostlocalhost;dbnamewebsite;charsetutf8, $config[user], $config[password] ); $stmt $pdo-query(SELECT id, title, created_at FROM articles ORDER BY created_at DESC); $articles $stmt-fetchAll(PDO::FETCH_ASSOC); ? !DOCTYPE html html langzh-CN head meta charsetUTF-8 title手工时代博客首页/title link relstylesheet hrefstyle.css /head body header h1我的博客/h1 nava href/index.php首页/a a href/about.php关于/a/nav /header main ?php foreach ($articles as $article): ? article h2?php echo htmlspecialchars($article[title]); ?/h2 time?php echo $article[created_at]; ?/time /article ?php endforeach; ? /main /body /html这个示例在今天看来很“原始”但它揭示了网站开发最本质的三件事数据怎么来、页面怎么拼、交互怎么实现。后续所有框架、组件化、前后端分离和 AI 辅助开发本质上都是在优化这三件事的效率。1.2 工程化时代从页面脚本走向组件系统大约从 jQuery 盛行开始网站开发逐渐从前端脚本走向工程化。早期 jQuery 解决的是浏览器兼容问题后来后端模板渲染越来越复杂出现了模板引擎、ORM、MVC 框架前端也逐渐从“页面脚本”转化为“单页应用”。开发人员开始把页面拆成组件把逻辑拆成模块用打包工具处理依赖关系。工程化时代的典型特征是代码被拆分成模块构建流程自动化前后端通过 API 通信。这个阶段的产品代表很多比如 AngularJS、React、Vue以及后来的 Next.js、Nuxt 等。开发者不再直接维护一个大的 HTML 文件而是维护一个由组件构成的源码目录通过构建命令生成可供浏览器运行的产物。一个典型的前端组件概念如下// 文件路径src/components/ArticleCard.jsx export default function ArticleCard({ article }) { return ( article classNamearticle-card h2{article.title}/h2 p{article.summary}/p span{article.createdAt}/span /article ); }工程化带来的好处非常明显可复用组件出现后开发一个官网或后台系统不再需要重复写相同结构的页面统一的状态管理和 API 封装也能让团队并行开发。不过工程化的门槛也同步提高了开发者需要理解 Node.js、npm、打包工具、环境变量、部署流水线。从“写页面”到“做工程”是一次思维模式的转换。1.3 AI 时代自然语言驱动网站生成进入 AI 时代后网站开发的工作方式又发生了一次转向。过去的开发流程是“人写代码机器编译运行”现在则是“人描述需求AI 生成代码人审查修改”。AI 建站不再是“自动套模板”那么简单而是能直接生成组件代码、接口封装、数据库建表语句甚至能根据设计稿生成接近可用的界面。这里需要区分两类 AI 建站方式。一类是“平台式 AI 建站”用户通过聊天界面描述网站类型、配色、栏目平台直接生成一套完整可部署的站点另一类是“AI 编程辅助”开发者在 IDE 中通过 AI 插件获得代码补全、函数生成、报错解释本质上是把 AI 嵌入了传统开发流程。从长期工程角度看后者对现有项目改造的影响更可控也更适合开发者进入 AI 开发时代。AI 建站的核心并不是“让 AI 替代程序员”而是通过自然语言接口把需求快速转成代码把程序员从大量重复的样板代码中解放出来。真正要判断的是 AI 生成的代码是否可维护、可测试、可部署、安全可靠。2. AI 建站前的技术储备与环境准备2.1 需要掌握的最低基础即使使用 AI 辅助开发也不意味着可以跳过基础。要真正用好 AI 建站至少需要掌握HTML 基础知道标签的语义能检查 AI 生成的结构是否合理。CSS 基础理解盒模型、Flex 布局、Grid 布局、响应式设计。JavaScript 基础理解变量、函数、异步、DOM 操作。至少一个前端框架建议从 React 或 Vue 入门AI 生成这两类代码的可用率最高。Git 基础能查看差异、提交代码、回滚变更。这些基础不是用来替代 AI而是用来校验 AI 生成结果的“安全网”。2.2 推荐开发环境在 AI 辅助开发中推荐使用支持 AI 插件的主流代码编辑器例如 VS Code 或 JetBrains 系列。环境方面建议安装 Node.js 当前稳定版本并安装 npm 或 pnpm 作为包管理器。操作系统方面Windows、macOS、Linux 都可以。下面以一个 Vue 3 Vite 项目为例说明新建项目的基本过程# 初始化一个 Vue 项目 npm create vitelatest my-ai-website -- --template vue # 进入项目目录 cd my-ai-website # 安装依赖 npm install # 启动开发服务器 npm run dev如果使用 React则把--template vue改为--template react。这里要说一个常见误区AI 能帮你生成代码但不会替你解决环境问题。如果你的 Node.js 版本过低、npm 镜像源配置错误、依赖安装失败这些仍然需要你根据报错信息手工排查。AI 可以作为辅助解答但调试环境仍然依赖基本功。2.3 版本与依赖管理建议AI 生成的代码往往默认使用“最新版本”的语法但你的本地环境不一定匹配。遇到依赖版本导致的报错不要把陈旧版本和最新代码混在一起。一个安全的做法是先在官方脚手架生成的最小项目里跑通再进行 AI 扩展。如果项目依赖比较复杂建议在项目根目录维护package.json时锁定主版本比如vue、react、vite的主版本号应当保持一致。不要从网上随意复制依赖版本容易引起冲突尽量用包管理器安装# 以 nuxt 为例安装最新稳定版本 npm install nuxt # 以 axios 为例安装某个具体大版本 npm install axios1版本问题没有标准答案因为不同项目、不同团队使用的基础环境各不相同。文章中的命令和代码也需要按实际环境调整。3. 从手工代码到 AI 生成的完整原理拆解3.1 静态页面与动态渲染的核心区别手工时代和 AI 时代网站底层仍然分为两类静态页面和动态应用。静态页面是指在构建或部署时就已经确定 HTML 内容的站点动态应用则是在运行时根据用户请求和数据来生成页面。AI 生成代码时需要弄清楚这一点。如果只是做一个企业宣传页静态页面足够了部署也最简单只需要一个 Nginx 或任意静态托管平台。如果有后台管理、用户登录、内容发布功能就要考虑后端服务、数据库和鉴权这会把系统复杂度大幅提高。下面是一个 Nginx 静态站点部署配置示例server { listen 80; server_name example.com; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } }这种配置是“前端路由”模式适合单页应用。如果只是纯静态页面还可以更简单不用try_files回退。3.2 组件化AI 最擅长的代码生成单位AI 在网站开发中最擅长的任务是“生成单个组件”。原因在于单个组件输入输出清晰、依赖较少、功能边界明确非常容易被语言模型理解和模仿。以 Vue 组件为例一个搜索框组件可能长这样!-- 文件路径src/components/ShopSearch.vue -- template div classsearch-box input v-modelkeyword typetext placeholder搜索商品 keyup.enterhandleSearch / button clickhandleSearch搜索/button /div /template script setup import { ref } from vue; const keyword ref(); function handleSearch() { if (keyword.value.trim()) { // 实际项目中应该在这里调用 API 或触发路由跳转 console.log(搜索关键词, keyword.value.trim()); } } /script style scoped .search-box { display: flex; gap: 8px; } input { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 8px 16px; background-color: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; } /style这个组件可以直接复制到项目中运行。如果让 AI 来写它通常也能输出类似的代码。但要注意不同 AI 生成的代码风格可能不一样需要人工检查命名、类型、错误处理再把组件接入路由和 API 层。3.3 API 与数据流AI 容易出错的环节AI 生成网站界面时比较容易忽略的环节是数据流。生成一个表单时AI 可能只会画出界面不会告诉你提交后数据到哪里去生成一个商品列表时AI 也可能写死一个数组而不是真正调用接口。在实际项目中前端和后端需要约定接口格式。以下是一个简单的前端 API 封装// 文件路径src/api/client.js const BASE_URL import.meta.env.VITE_API_BASE_URL || /api; export async function request(path, options {}) { const response await fetch(${BASE_URL}${path}, { headers: { Content-Type: application/json, ...(options.headers || {}) }, ...options }); if (!response.ok) { throw new Error(请求失败${response.status}); } return response.json(); } export function getArticles() { return request(/articles); } export function createArticle(data) { return request(/articles, { method: POST, body: JSON.stringify(data) }); }把 AI 生成的界面组件和这个 API 模块结合就是一个可运行的完整流程。重要的是你需要自己确认接口的路径和返回结构不要依赖 AI 猜测。4. 完整实战用 AI 辅助从零搭建一个企业官网下面的实战示例会完整演示“人工搭骨架 AI 生成组件 人工审查集成”的开发流程。项目目标是做一个极简的企业官网包含首页、关于页和新闻列表。4.1 创建项目结构使用 Vue 3 Vite 创建项目npm create vitelatest company-ai-site -- --template vue cd company-ai-site npm install npm install vue-router项目结构如下company-ai-site/ ├── index.html ├── package.json ├── vite.config.js └── src/ ├── main.js ├── App.vue ├── router/ │ └── index.js └── views/ ├── HomeView.vue ├── AboutView.vue └── NewsView.vue4.2 添加路由配置修改src/router/index.js// 文件路径src/router/index.js import { createRouter, createWebHistory } from vue-router; import HomeView from ../views/HomeView.vue; import AboutView from ../views/AboutView.vue; import NewsView from ../views/NewsView.vue; const routes [ { path: /, name: home, component: HomeView }, { path: /about, name: about, component: AboutView }, { path: /news, name: news, component: NewsView } ]; const router createRouter({ history: createWebHistory(), routes }); export default router;4.3 使用 AI 生成首页核心组件打开 AI 编程工具输入下面这段提示词请生成一个 Vue 3 企业官网首页组件包含 1. 顶部导航栏包含首页、关于我们、新闻三个链接 2. Hero 区域标题是“让技术驱动企业增长”副标题说明业务价值 3. 三个特性卡片分别描述网站开发、AI 应用、技术咨询 4. 页脚区域包含版权信息。 组件使用 script setup 语法样式使用 scoped整体风格简洁现代配色以蓝色为主。AI 会返回一个.vue文件。把结果保存到src/views/HomeView.vue然后打开项目页面预览效果。这里要注意AI 生成的导航链接通常需要改成 Vue Router 的RouterLink才能正确跳转你需要手动替换!-- 文件路径src/views/HomeView.vue核心片段 -- template div header classsite-header RouterLink to/ classlogo企业官网/RouterLink nav RouterLink to/首页/RouterLink RouterLink to/about关于我们/RouterLink RouterLink to/news新闻/RouterLink /nav /header section classhero h1让技术驱动企业增长/h1 p我们提供网站开发、AI 应用与技术咨询服务/p /section !-- ... -- /div /template4.4 运行与验证npm run dev浏览器打开http://localhost:5173应该能看到首页。接着再让 AI 生成关于页和新闻列表页并接入一个本地新闻数据源。为了让示例更真实我们在src/views/NewsView.vue中维护一个临时数组!-- 文件路径src/views/NewsView.vue -- script setup const newsList [ { id: 1, title: 公司发布 AI 辅助开发平台, date: 2025-01-15 }, { id: 2, title: 新版官方网站正式上线, date: 2025-02-01 } ]; /script template main classnews-page h1公司新闻/h1 ul li v-foritem in newsList :keyitem.id h2{{ item.title }}/h2 time{{ item.date }}/time /li /ul /main /template4.5 把项目打包部署本地验证通过后执行npm run build构建产物会输出到dist目录。将该目录上传到服务器或用静态托管平台部署即可。如果服务器使用 Nginx可以参考前文给出的配置如果部署到云主机需要把dist目录放到 Web 根目录并保证前端路由回退到index.html。这个完整流程的特点是脚手架、路由、组件生成由 AI 辅助完成但项目结构、路由、数据绑定、部署验证都还是要人工把关。5. AI 辅助网站开发中的常见问题与排查思路AI 建站看起来很快但实际落地时会遇到不少问题。下面整理一些高频问题和排查思路问题现象常见原因解决思路页面白屏路由路径或组件导入错误打开浏览器控制台查看报错信息检查import路径样式错乱AI 生成的 CSS 与其他组件冲突将样式改为scoped检查全局样式覆盖API 请求 404接口路径写错或服务未启动检查BASE_URL、后端路由、CORS 配置依赖安装失败Node 版本过旧或镜像源问题升级 Node.js检查 npm 镜像源删除node_modules后重装AI 生成代码没有导出组件缺少export default检查.vue文件中的组件导出语法打包体积过大组件重复引入全局依赖按需引入组件分离第三方库 chunk5.1 如何排查 AI 生成代码的隐藏问题AI 生成代码的问题往往不体现在报错上而是体现在“运行起来看似正常但代码质量很差”。比如组件内部直接定义大量重复样式导致代码膨胀。使用明文保存 API Key 等敏感信息。没有做空值校验接口返回异常时直接抛错。表单提交未加防重复点击和输入校验。遇到这类问题不能只看页面是否显示还要检查代码中是否有明显的安全风险和性能浪费。AI 生成的代码应该被当作“第一稿”而不是“最终结果”。5.2 让 AI 生成结果更稳定的提示词方法想让 AI 生成更可用的代码关键在于把提示词写得具体。好的提示词应该包含技术栈Vue 3、React 18、TypeScript 等。组件职责是展示列表还是提交表单。数据结构字段名、字段类型。样式要求UI 风格、配色、是否响应式。边界条件是否处理加载状态、空状态、错误状态。示例请用 Vue 3 script setup 生成一个商品列表组件。 从 props 接收 products 数组每一项包含 id、name、price、coverImage。 组件需要展示商品卡片并支持点击卡片后通过 emit 触发 select 事件。 需要处理加载状态 loading 和空数组状态 empty样式使用 scoped。这样生成的代码会更接近真实需求减少人工返工。6. AI 建站的最佳实践与工程建议6.1 项目结构要“人工搭AI填”不要让 AI 从零开始生成整个项目结构因为项目结构涉及技术选型、团队规范和部署方式AI 无法完全理解你的业务背景。更推荐的做法是人工先搭好项目骨架、跑通一条最小链路再让 AI 在这个结构里补充组件和页面。这个流程既保证了可运行性又利用了 AI 的生成效率。6.2 必须保留代码审查环节无论是单体项目还是多模块项目AI 生成的代码都需要经过审查。重点检查以下方面权限与安全页面中不能出现硬编码的密钥、Token、密码接口请求要经过统一的鉴权逻辑。数据正确性边界条件、空值、异常分支是否处理。依赖影响新加入的依赖是否与现有框架版本兼容。可维护性组件命名、代码注释、目录结构是否符合团队规则。6.3 坚持最小权限与数据安全原则当 AI 建站涉及后端接口、数据库或第三方服务时必须强调最小权限原则。在开发环境和测试环境中可以使用独立账号不要直接使用生产环境的数据库凭证。涉及删除、批量更新或用户数据导出的场景需要先在测试环境验证并做好备份。安全这条底线不会因为引入 AI 而改变。恰恰相反AI 生成代码更容易因为“看起来完整”而让人放松警惕实际项目中要格外小心。6.4 让 AI 融入团队工作流AI 建站并不是一次性行为而是长期工作流的一部分。建议团队在代码仓库中统一维护组件库、设计变量、接口文档让 AI 生成代码时能基于这些上下文输出更一致的代码。把 AI 作为团队开发的“结对程序员”而不是脱离工程的独立黑盒。6.5 关注 AI Agent 与自动化趋势当前网站开发正在向 AI Agent 方向发展Agent 不仅能生成代码还能根据任务自动调用构建命令、执行测试、修改文件、提交代码。这意味着开发流程会进一步自动化。但对开发者来说越自动化的流程越需要更完备的测试与回滚机制。“能自动做”不等于“一定做得对”Agent 的行为需要被约束在可控范围。7. 总结与学习路线这篇文章回顾了网站开发从手工编码到工程化再到 AI 辅助生成的完整演进过程并通过一个 Vue 3 企业官网案例演示了 AI 辅助开发的落地流程。核心结论是AI 让网站开发的门槛降低了但工程化的复杂度并没有消失。如果你是初学者建议按这条路线学习先掌握 HTML、CSS、JavaScript 基础再选择一个前端框架深入接着理解 API、部署和基本的安全知识最后再把 AI 工具引入日常练习。如果反过来一上来就依赖 AI 生成代码遇到问题和排查时很容易陷入被动。如果你已经有开发经验不妨把 AI 当作提升效率的助手但不要放松代码审查和安全意识。下一步可以深入的方向包括AI Agent 开发、前后端自动化测试、容器化部署以及如何基于团队内部组件库定制 AI 辅助代码生成。