零基础玩转AI编程：Lovable与Codex实战入门指南
前端搬砖侠
2026-07-08 11:10
阅读 387
作者：阿杰 | 985全栈工程师 | 掘金签约作者
写在前面：最近看到太多同学在评论区问我"零基础能不能做全栈项目"、"不会写代码能不能做出一个完整产品"，我决定写这篇教程，手把手带你用 Lovable 和 Codex 这两个工具，从零搭建一个完整的项目。我当初学的时候，踩了无数坑，这篇文章会帮你全部避开。
一、为什么要学这篇教程？
大家好，我是阿杰，一个从985计算机专业毕业的全栈工程师，目前在掘金写技术博客也有三年了。
写这篇教程的初衷很简单：现在的编程世界正在发生一场巨大的变革。
过去，你想做一个完整的Web项目，你需要学前端（HTML、CSS、JavaScript、React/Vue）、学后端（Node.js/Python/Java）、学数据库（MySQL/MongoDB）、学部署（Docker/Nginx）……光是把这些东西学完，可能就要半年到一年。
但现在不一样了。AI编程工具的出现，让"零基础做项目"这件事变得真正可行。
今天我要介绍的两个工具：
- Lovable：一个AI驱动的全栈开发平台，你用自然语言描述需求，它帮你生成完整的前后端代码
- Codex：OpenAI推出的代码生成与执行工具，可以在沙箱环境中运行和测试代码
这两个工具配合使用，可以让你在完全不会写代码的情况下，做出一个像模像样的项目。
我当初学的时候，花了三个月才搞明白整个全栈开发的流程。现在有了这些工具，可能一个下午就能搞定。但工具归工具，理解背后的原理才是最重要的。所以这篇教程，我会一边带你做项目，一边把核心概念讲清楚。
二、环境准备：你需要准备什么？
别紧张，这里的环境准备非常简单，不需要你安装什么复杂的开发工具。
2.1 基础账号准备
| 工具 | 用途 | 注册地址 | 费用 |
|---|---|---|---|
| Lovable | AI全栈开发平台 | lovable.dev | 免费版可用 |
| Codex (OpenAI) | AI代码生成与执行 | platform.openai.com | 需要API额度 |
| GitHub | 代码托管与版本管理 | github.com | 免费 |
| VS Code（可选） | 本地代码编辑器 | code.visualstudio.com | 免费 |
2.2 Lovable 平台注册与初始化
第一步：注册账号
打开浏览器，访问 lovable.dev，使用 GitHub 账号登录即可。
第二步：创建新项目
登录后，点击页面上的 "New Project" 按钮，你会看到一个项目创建界面。
第三步：选择项目模板
Lovable 提供了一些预设模板，比如：
- Blank Project：空白项目，从零开始
- Landing Page：落地页模板
- Dashboard：管理后台模板
- E-commerce：电商模板
初学者建议选择 Blank Project，这样你能更清楚地理解每一步在做什么。
2.3 Codex 环境配置
Codex 的使用需要你有 OpenAI 的 API Key。
获取 API Key 的步骤：
- 登录
platform.openai.com - 进入 API Keys 页面
- 点击 "Create new secret key"
- 复制生成的 Key（注意：这个 Key 只显示一次，务必保存好）
Codex 的基本使用方式：
Codex 有两种使用方式：
- 网页版：直接在 ChatGPT 界面中使用，选择 Codex 模式
- API调用：通过代码调用 OpenAI 的 API
对于初学者，我建议使用网页版，门槛最低。
2.4 本地开发环境（可选）
如果你想在本地也跑一跑代码，建议安装以下工具：
# 安装 Node.js（推荐 v18 以上版本）
# 访问 https://nodejs.org 下载安装
# 验证安装
node -v # 应输出 v18.x.x 或更高
npm -v # 应输出 9.x.x 或更高
# 安装 Git（用于版本管理）
# 访问 https://git-scm.com 下载安装
# 验证安装
git -v # 应输出 git version 2.x.x
三、核心概念：用大白话讲清楚
在动手之前，我需要你先理解几个关键概念。我用最简单的方式来讲。
3.1 什么是 Lovable？
一句话解释：Lovable 就是一个"会说人话的程序员"。
你用中文或英文告诉它"我要做一个待办事项应用"，它就会帮你生成：
- 前端页面（用户看到的界面）
- 后端逻辑（服务器端的处理）
- 数据库结构（数据怎么存储）
- 部署配置（怎么让全世界访问）
它底层使用的技术栈通常是：
- 前端：React + Tailwind CSS + shadcn/ui
- 后端：Supabase（提供数据库、认证等功能）
- 部署：自动部署到云端
3.2 什么是 Codex？
一句话解释：Codex 是一个"能执行代码的AI助手"。
和普通的 ChatGPT 不同，Codex 不仅能生成代码，还能在沙箱环境中执行代码，让你看到运行结果。
这意味着：
- 你让它写一个 Python 脚本，它能直接运行给你看结果
- 你让它调试一段代码，它能跑一遍告诉你哪里出了问题
- 你让它分析数据，它能直接生成图表
3.3 前端 vs 后端 vs 数据库
这是全栈开发的三个核心部分，我用一个餐厅的比喻来解释：
| 概念 | 餐厅比喻 | 技术解释 |
|---|---|---|
| 前端 | 餐厅的大堂和菜单 | 用户看到的界面，负责展示和交互 |
| 后端 | 厨房和厨师 | 服务器端逻辑，处理业务规则 |
| 数据库 | 仓库和食材柜 | 存储数据的地方 |
当你打开一个网页：
- 前端把页面展示给你看
- 你点击了一个按钮，前端发送请求给后端
- 后端去数据库里查数据
- 查到后，后端把数据返回给前端
- 前端把数据展示在页面上
3.4 什么是 Prompt Engineering（提示词工程）？
在使用 Lovable 和 Codex 时，你"怎么提问"直接决定了"AI给你什么结果"。
差的提示词：
帮我做一个网站
好的提示词：
帮我做一个个人博客网站，要求：
1. 首页展示最近的文章列表，每篇文章显示标题、摘要、发布日期
2. 有文章详情页，支持Markdown渲染
3. 有一个"关于我"页面
4. 整体风格简约，使用深色主题
5. 需要响应式设计，手机端也能正常浏览
提示词编写公式（我建议新手记住这个）：
角色 + 任务 + 具体要求 + 风格/约束
举个例子：
你是一个资深前端工程师（角色），
请帮我开发一个天气预报页面（任务），
要求显示当前温度、湿度、风速，
以及未来5天的天气预报（具体要求），
使用卡片式布局，配色清新明亮（风格约束）。
四、实战项目：用 Lovable 搭建一个「个人记账应用」
好了，概念讲完了，我们开始动手。
这个项目是一个个人记账应用，功能包括：
- 记录每笔收入和支出
- 按类别分类（餐饮、交通、购物等）
- 查看月度统计
- 数据持久化存储
我当初学的时候，第一个项目也是记账应用。因为它足够简单，但又能覆盖到增删改查（CRUD）这些最核心的操作。
4.1 第一步：在 Lovable 中创建项目
打开 Lovable，创建一个新的空白项目。
在对话框中输入以下提示词：
请帮我创建一个个人记账应用，技术栈使用 React + Tailwind CSS + Supabase。
功能需求：
1. 首页显示本月收支概览（总收入、总支出、结余）
2. 可以添加新的记账记录，包含：金额、类型（收入/支出）、类别、备注、日期
3. 记账列表页，按日期倒序显示所有记录
4. 可以删除和编辑记录
5. 统计页面，按类别展示支出占比
设计要求：
- 使用卡片式布局
- 主色调使用蓝绿色系
- 移动端优先的响应式设计
Lovable 会做什么？
它会根据你的描述，自动生成以下内容：
项目结构：
├── src/
│ ├── components/ # 组件目录
│ │ ├── Dashboard.tsx # 首页概览组件
│ │ ├── AddTransaction.tsx # 添加记录组件
│ │ ├── TransactionList.tsx # 记录列表组件
│ │ └── Statistics.tsx # 统计页面组件
│ ├── lib/
│ │ └── supabase.ts # Supabase 配置
│ ├── types/
│ │ └── index.ts # 类型定义
│ ├── App.tsx # 主应用组件
│ └── main.tsx # 入口文件
├── package.json
└── tailwind.config.js
4.2 第二步：理解生成的代码
Lovable 生成代码后，我来带你看看几个关键文件。
类型定义文件 types/index.ts：
// 这条代码定义了"记账记录"长什么样
// 就像一张表格的表头，规定了有哪些字段
export interface Transaction {
id: string; // 唯一标识
amount: number; // 金额
type: 'income' | 'expense'; // 类型：收入或支出
category: string; // 类别（餐饮、交通等）
note: string; // 备注
date: string; // 日期
created_at: string; // 创建时间
}
// 这条代码定义了"类别"长什么样
export interface Category {
id: string;
name: string; // 类别名称
icon: string; // 图标
type: 'income' | 'expense'; // 属于收入还是支出
}
Supabase 配置文件 lib/supabase.ts：
// 这个文件用来连接数据库
// 你可以把它理解成"数据库的钥匙"
import { createClient } from '@supabase/supabase-js';
// 这两个值是你的项目专属的
// Lovable 会自动帮你填好
const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'your-anon-key';
// 创建数据库连接客户端
export const supabase = createClient(supabaseUrl, supabaseKey);
核心组件 components/AddTransaction.tsx：
// 这是"添加记账记录"的页面组件
// React 组件就像一个个"积木块"，拼起来就是整个页面
import React, { useState } from 'react';
import { supabase } from '../lib/supabase';
// 预定义的支出类别
const expenseCategories = ['餐饮', '交通', '购物', '娱乐', '住房', '其他'];
// 预定义的收入类别
const incomeCategories = ['工资', '兼职', '投资', '其他'];
export function AddTransaction() {
// useState 是 React 的"状态管理"
// 你可以理解为"记忆变量"，用来记住用户输入的内容
const [amount, setAmount] = useState('');
const [type, setType] = useState<'income' | 'expense'>('expense');
const [category, setCategory] = useState('');
const [note, setNote] = useState('');
const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
// 这个函数在用户点击"保存"按钮时执行
const handleSubmit = async () => {
// 第一步：检查必填项
if (!amount || !category) {
alert('请填写金额和类别');
return;
}
// 第二步：把数据保存到数据库
const { error } = await supabase
.from('transactions') // 指定要操作的表
.insert([{ // 要插入的数据
amount: parseFloat(amount), // 把字符串转成数字
type,
category,
note,
date,
}]);
// 第三步：处理结果
if (error) {
alert('保存失败：' + error.message);
} else {
alert('保存成功！');
// 清空表单
setAmount('');
setCategory('');
setNote('');
}
};
// 这部分是页面的"长相"（HTML结构 + CSS样式）
return (
<div className="max-w-md mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">记一笔</h2>
{/* 收入/支出切换 */}
<div className="flex gap-4 mb-4">
<button
onClick={() => setType('expense')}
className={`flex-1 py-2 rounded-lg ${
type === 'expense' ? 'bg-red-500 text-white' : 'bg-gray-200'
}`}
>
支出
</button>
<button
onClick={() => setType('income')}
className={`flex-1 py-2 rounded-lg ${
type === 'income' ? 'bg-green-500 text-white' : 'bg-gray-200'
}`}
>
收入
</button>
</div>
{/* 金额输入 */}
<input
type="number"
placeholder="金额"
value={amount}
onChange={(e) => setAmount(e.target.value)}
className="w-full p-3 border rounded-lg mb-4"
/>
{/* 类别选择 */}
<div className="grid grid-cols-3 gap-2 mb-4">
{(type === 'expense' ? expenseCategories : incomeCategories).map(
(cat) => (
<button
key={cat}
onClick={() => setCategory(cat)}
className={`p-2 rounded-lg text-sm ${
category === cat
? 'bg-blue-500 text-white'
: 'bg-gray-100'
}`}
>
{cat}
</button>
)
)}
</div>
{/* 备注输入 */}
<input
type="text"
placeholder="备注（可选）"
value={note}
onChange={(e) => setNote(e.target.value)}
className="w-full p-3 border rounded-lg mb-4"
/>
{/* 日期选择 */}
<input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
className="w-full p-3 border rounded-lg mb-6"
/>
{/* 保存按钮 */}
<button
onClick={handleSubmit}
className="w-full py-3 bg-blue-500 text-white rounded-lg font-bold"
>
保存
</button>
</div>
);
}
4.3 第三步：用 Codex 辅助开发
在 Lovable 生成的基础代码上，我们可能还需要一些额外的功能。这时候就可以用 Codex 来帮忙。
场景一：让 Codex 帮你写一个数据可视化组件
你可以在 Codex 中输入：
请用 React + Recharts 写一个饼图组件，
接收一个数据数组作为 props，
每个数据项包含 name（类别名）和 value（金额），
饼图要显示百分比标签，
配色使用蓝绿色系。
Codex 会生成类似这样的代码：
import React from 'react';
import { PieChart, Pie, Cell, Tooltip, Legend } from 'recharts';
// 定义组件接收的数据格式
interface PieChartData {
name: string; // 类别名称
value: number; // 对应的金额
}
interface CategoryPieChartProps {
data: PieChartData[]; // 传入的数据数组
}
// 蓝绿色系的配色方案
const COLORS = ['#008891', '#00A896', '#02C39A', '#05BFDB', '#0096C7', '#48A9A6'];
export function CategoryPieChart({ data }: CategoryPieChartProps) {
// 计算总金额，用于显示百分比
const total = data.reduce((sum, item) => sum + item.value, 0);
return (
<PieChart width={400} height={300}>
<Pie
data={data}
cx="50%"
cy="50%"
outerRadius={100}
// 自定义标签，显示类别名和百分比
label={({ name, value }) => `${name}: ${((value / total) * 100).toFixed(1)}%`}
dataKey="value"
>
{data.map((entry, index) => (
<Cell key={index} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
<Legend />
</PieChart>
);
}
场景二：让 Codex 帮你优化 SQL 查询
如果你需要从数据库中获取月度统计数据，可以在 Codex 中输入：
帮我写一个 Supabase 的查询，
从 transactions 表中，
查询本月所有记录，
按 category 分组，
计算每个 category 的总金额，
只统计 type 为 expense 的记录，
结果按总金额从高到低排序。
Codex 会生成：
// 获取本月支出按类别统计
async function getMonthlyExpenseByCategory() {
// 获取本月的起止日期
const now = new Date();
const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
.toISOString()
.split('T')[0];
const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0)
.toISOString()
.split('T')[0];
// 查询数据库
const { data, error } = await supabase
.from('transactions')
.select('category, amount')
.eq('type', 'expense') // 只查支出
.gte('date', startOfMonth) // 大于等于月初
.lte('date', endOfMonth); // 小于等于月末
if (error) throw error;
// 在前端按类别分组并求和
const grouped = data.reduce((acc, item) => {
if (!acc[item.category]) {
acc[item.category] = 0;
}
acc[item.category] += item.amount;
return acc;
}, {} as Record<string, number>);
// 转成数组并按金额降序排列
const result = Object.entries(grouped)
.map(([name, value]) => ({ name, value }))
.sort((a, b) => b.value - a.value);
return result;
}
4.4 第四步：完善项目细节
到这里，我们的记账应用已经有了基本功能。接下来，我带你完善一些细节。
添加数据验证：
// 一个通用的验证工具函数
// 用来检查用户输入是否合法
interface ValidationResult {
isValid: boolean;
errors: string[];
}
function validateTransaction(data: {
amount: string;
category: string;
date: string;
}): ValidationResult {
const errors: string[] = [];
// 检查金额
const amountNum = parseFloat(data.amount);
if (!data.amount) {
errors.push('请输入金额');
} else if (isNaN(amountNum)) {
errors.push('金额必须是数字');
} else if (amountNum <= 0) {
errors.push('金额必须大于0');
} else if (amountNum > 99999999) {
errors.push('金额不能超过99999999');
}
// 检查类别
if (!data.category) {
errors.push('请选择类别');
}
// 检查日期
if (!data.date) {
errors.push('请选择日期');
} else if (new Date(data.date) > new Date()) {
errors.push('日期不能是未来');
}
return {
isValid: errors.length === 0,
errors,
};
}
// 使用示例
const result = validateTransaction({
amount: '100',
category: '餐饮',
date: '2024-01-15',
});
if (!result.isValid) {
console.log('验证失败：', result.errors);
// 输出：验证失败：[] （这个例子是通过验证的）
}
添加加载状态和错误处理：
// 一个带有加载状态和错误处理的列表组件
// 这是实际项目中非常重要的模式
import React, { useState, useEffect } from 'react';
import { supabase } from '../lib/supabase';
export function TransactionList() {
// 三个状态：数据、加载中、错误信息
const [transactions, setTransactions] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// useEffect 在组件加载时自动执行
useEffect(() => {
fetchTransactions();
}, []); // 空数组表示只在组件首次加载时执行
// 从数据库获取数据
async function fetchTransactions() {
try {
setLoading(true); // 开始加载
setError(null); // 清除之前的错误
const { data, error } = await supabase
.from('transactions')
.select('*')
.order('date', { ascending: false }); // 按日期倒序
if (error) throw error;
setTransactions(data || []);
} catch (err) {
setError('加载失败，请稍后重试');
console.error(err);
} finally {
setLoading(false); // 无论成功失败，都结束加载状态
}
}
// 删除记录
async function handleDelete(id: string) {
if (!confirm('确定要删除这条记录吗？')) return;
const { error } = await supabase
.from('transactions')
.delete()
.eq('id', id);
if (error) {
alert('删除失败');
} else {
// 删除成功后，从列表中移除
setTransactions(prev => prev.filter(t => t.id !== id));
}
}
// 加载中显示骨架屏
if (loading) {
return (
<div className="space-y-4">
{[1, 2, 3].map(i => (
<div key={i} className="h-20 bg-gray-200 rounded-lg animate-pulse" />
))}
</div>
);
}
// 出错时显示错误信息
if (error) {
return (
<div className="text-center p-8">
<p className="text-red-500 mb-4">{error}</p>
<button
onClick={fetchTransactions}
className="px-4 py-2 bg-blue-500 text-white rounded"
>
重试
</button>
</div>
);
}
// 正常显示数据列表
return (
<div className="space-y-3">
{transactions.length === 0 ? (
<p className="text-center text-gray-500 py-8">暂无记录</p>
) : (
transactions.map((t) => (
<div
key={t.id}
className="flex justify-between items-center p-4 bg-white rounded-lg shadow"
>
<div>
<p className="font-bold">{t.category}</p>
<p className="text-sm text-gray-500">{t.date}</p>
{t.note && <p className="text-sm text-gray-400">{t.note}</p>}
</div>
<div className="flex items-center gap-3">
<span className={
t.type === 'income' ? 'text-green-500' : 'text-red-500'
}>
{t.type === 'income' ? '+' : '-'}¥{t.amount}
</span>
<button
onClick={() => handleDelete(t.id)}
className="text-gray-400 hover:text-red-500"
>
删除
</button>
</div>
</div>
))
)}
</div>
);
}
4.5 第五步：部署上线
Lovable 的一大优势是自带部署功能。你只需要：
- 点击项目右上角的 "Publish" 按钮
- 选择一个域名（可以使用 Lovable 提供的免费子域名，也可以绑定自己的域名）
- 等待几十秒，部署完成
部署完成后，你会得到一个类似这样的链接：
https://your-project.lovable.app
把这个链接分享给朋友，他们就能直接访问你的记账应用了。
五、完整项目流程总结
让我用文字流程图来总结一下整个开发过程：
┌─────────────────────────────────────────────────────┐
│ 项目开发流程 │
├─────────────────────────────────────────────────────┤
│ │
│ 1. 需求描述 │
│ └── 用自然语言在 Lovable 中描述你想要的应用 │
│ │ │
│ ▼ │
│ 2. AI 生成代码 │
│ └── Lovable 自动生成前端 + 后端 + 数据库 │
│ │ │
│ ▼ │
│ 3. 预览与调试 │
│ └── 在 Lovable 内置预览中查看效果 │
│ │ │
│ ▼ │
│ 4. 迭代优化 │
│ └── 用 Codex 生成复杂组件、优化代码 │
│ └── 在 Lovable 中继续对话修改 │
│ │ │
│ ▼ │
│ 5. 部署上线 │
│ └── 一键部署到云端，获取访问链接 │
│ │
└─────────────────────────────────────────────────────┘
六、常见问题解答
我当初学的时候，这些问题困扰了我很久，希望你不要再踩同样的坑。
Q1：Lovable 生成的代码质量怎么样？能用在生产环境吗？
回答：Lovable 生成的代码质量对于学习和个人项目来说是完全够用的。但如果要用在生产环境（比如给公司做项目），还需要人工审查和优化。
主要原因：
- AI 生成的代码可能没有考虑到所有的边界情况
- 安全性方面需要额外加固（比如权限控制、输入过滤）
- 性能优化需要人工介入
建议：把 Lovable 生成的代码当作"初稿"，在此基础上修改完善。
Q2：完全不懂代码，能看懂 Lovable 生成的代码吗？
回答：刚开始肯定看不懂，这很正常。我当初学 React 的时候，看代码也像看天书。
建议的学习路径：
| 阶段 | 学习内容 | 预计时间 |
|---|---|---|
| 第1周 | HTML 基础 + CSS 基础 | 5-7小时 |
| 第2周 | JavaScript 基础语法 | 7-10小时 |
| 第3周 | React 基础（组件、状态、事件） | 10-12小时 |
| 第4周 | 跟着 Lovable 项目学，边看边改 | 持续进行 |
你不需要先学完所有东西再开始做项目。边做边学是最高效的方式。
Q3：Codex 和 ChatGPT 写代码有什么区别？
回答：最大的区别是Codex 能执行代码。
| 特性 | ChatGPT | Codex |
|---|---|---|
| 生成代码 | ✅ | ✅ |
| 执行代码 | ❌ | ✅ |
| 看到运行结果 | ❌ | ✅ |
| 自动调试 | ❌ | ✅ |
| 处理文件 | ❌ | ✅ |
| 生成图表 | ❌ | ✅ |
简单来说，ChatGPT 是"纸上谈兵"，Codex 是"真刀真枪"。
Q4：Lovable 免费额度够用吗？
回答：免费版通常足够你学习和做小项目。但如果你要频繁生成大型项目，可能会遇到额度限制。
省钱建议：
- 先在 Lovable 的对话框里把需求描述清楚，减少反复修改的次数
- 小改动直接在代码里手动改，不要每次都重新生成
- 善用 Codex 的免费额度来辅助开发
Q5：用 AI 工具做的项目，面试的时候能说吗？
回答：当然可以！但前提是你真正理解了代码的逻辑。
面试官不会因为你用了 AI 工具就扣分。他们关心的是：
- 你能不能解释代码是怎么工作的
- 你遇到问题时是怎么解决的
- 你对技术选型有没有自己的思考
建议：用 AI 工具做出项目后，一定要花时间把代码读懂。可以一行一行地看，不懂的就问 Codex 或 ChatGPT。
七、避坑指南：我踩过的坑你别再踩
坑1：提示词写得太模糊
❌ 错误示范：帮我做一个商城
✅ 正确示范：帮我做一个简单的商品展示页面，
包含商品列表（图片、名称、价格）、
商品详情弹窗、购物车功能（添加、删除、计算总价），
使用卡片式布局，主色调为橙色。
坑2：一次性让 AI 做太多事情
不要一口气让 AI 做一个完整的淘宝。应该分步骤来：
第1步：先做商品列表页
第2步：加上商品详情功能
第3步：加上购物车功能
第4步：加上结算功能
每一步做完、测试没问题后，再进行下一步。
坑3：不看代码就直接部署
AI 生成的代码一定要先看一遍。至少检查：
- 有没有硬编码的敏感信息（API Key 等）
- 数据库权限是否设置正确
- 有没有明显的逻辑错误
坑4：过度依赖 AI，不学基础
AI 工具是"加速器"，不是"替代品"。你仍然需要学习基础知识，否则：
- AI 生成的代码出了问题，你不知道怎么修
- 你想加一个新功能，不知道该怎么描述
- 你无法判断 AI 生成的代码质量好不好
八、下一步学习建议
恭喜你！如果你跟着这篇教程做完了记账应用，你已经迈出了全栈开发的第一步。
接下来，我建议你按照以下路径继续学习：
阶段一：夯实基础（1-2个月）
前端基础
├── HTML5 语义化标签
├── CSS3 布局（Flexbox、Grid）
├── JavaScript ES6+ 语法
└── React 核心概念（组件、Hooks、路由）
后端基础
├── Node.js 基础
├── Express 或 Next.js 框架
├── RESTful API 设计
└── Supabase 或 Firebase 使用
阶段二：进阶提升（2-3个月）
进阶技能
├── TypeScript（给代码加类型约束）
├── 状态管理（Zustand 或 Redux）
├── 数据库设计（关系型数据库基础）
├── 用户认证（登录、注册、权限）
└── 部署与运维（Vercel、Docker 基础）
阶段三：实战积累（持续进行）
项目建议（由易到难）
├── 1. 个人博客（本文项目的延伸）
├── 2. 任务管理应用（类似 Trello）
├── 3. 聊天应用（WebSocket 实时通信）
├── 4. 电商小程序（完整的前后端+支付）
└── 5. SaaS 产品（多租户、订阅制）
推荐学习资源
| 资源 | 类型 | 适合阶段 |
|---|---|---|
| React 官方文档 | 文档 | 入门-进阶 |
| 掘金前端专栏 | 文章 | 全阶段 |
| freeCodeCamp | 互动课程 | 入门 |
| The Odin Project | 完整课程 | 入门-进阶 |
| 我的掘金博客 | 教程 | 入门 |
九、写在最后
写到这里，这篇教程差不多就结束了。
我想说的是，编程的门槛正在以前所未有的速度降低。
几年前，你想做一个完整的Web应用，需要学好几个月的课。现在，有了 Lovable、Codex 这样的 AI 工具，一个完全零基础的人，一个下午就能做出一个能用的产品。
但这不意味着"不需要学习了"。恰恰相反，AI 工具的出现，让学习的重点发生了转移：
- 从"怎么写出这行代码"转向"怎么描述清楚需求"
- 从"记住所有语法"转向"理解架构和原理"
- 从"手动实现每个功能"转向"审查和优化AI生成的代码"
工具在变，但"理解问题、解决问题"的能力永远不会过时。
我当初学编程的时候，没有人告诉我这些捷径。现在我把它分享给你，希望你能少走一些弯路。
如果这篇教程对你有帮助，欢迎点赞、收藏、评论。有任何问题，评论区见！
作者：阿杰 | 985全栈工程师 | 掘金签约作者
专注于用通俗易懂的方式分享技术知识。关注我，获取更多入门教程和实战项目。
下一篇预告：《用 Next.js + Supabase 打造一个完整的 SaaS 应用》
标签:Lovable教程Codex
为你推荐
暂无相关推荐
评论 0