AI 编程基础

项目目标

做一个简单的个人博客，包含：

首页：文章列表
文章详情页：完整内容
关于页面：作者介绍

⏱️ 预计耗时：30 分钟跟着做完全程

🎯 里程碑 1：创建项目（3 分钟）

打开终端，运行：

npm create vite@latest my-blog -- --template vue
cd my-blog
npm install
npm install vue-router
npm run dev

浏览器打开 http://localhost:5173，看到 Vite + Vue 的欢迎页。

✅ 完成标志： 浏览器里能看到 Vite 默认页面

🎯 里程碑 2：搭建路由（5 分钟）

创建 src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Post from '../views/Post.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/post/:id', component: Post },
  { path: '/about', component: About },
];

export default createRouter({
  history: createWebHistory(),
  routes,
});

在 src/main.js 中注册路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

✅ 完成标志： 页面没报错，URL 可以正常变化

🎯 里程碑 3：让 AI 生成组件（15 分钟）

在 Cursor 中按 Cmd+L，输入：

我在做一个 Vue 3 博客项目，已经配好了 vue-router。项目风格参考 Linear App 的简洁设计。现在帮我创建：

更新 App.vue：顶部导航栏（左侧”我的博客”，右侧”首页 / 关于”），下方 <router-view />。简洁现代，浅色主题。

创建 views/Home.vue：显示文章列表，每篇卡片包含标题、摘要、日期。数据暂时用硬编码数组。

创建 views/Post.vue：根据路由参数 :id 显示文章完整内容。有返回首页的链接。

创建 views/About.vue：个人介绍，包含”关于我""技术栈""联系我”三个区域。

AI 会生成 4 个文件的完整代码。

✅ 完成标志： 三个页面都能点击切换，Home 页显示文章列表

🎯 里程碑 4：预览和微调（5 分钟）

现在你应该能看到：

/ → 首页，显示文章列表
/post/1 → 文章详情
/about → 关于页

然后迭代调整，告诉 AI：

"导航栏加上渐变色背景"
"文章卡片加上 hover 效果和阴影"
"文章详情页标题加大，日期显示在标题下方"
"关于页加一个头像占位圆圈"

✅ 完成标志： 你对样式满意，准备发给朋友看

🎯 里程碑 5：加入测试数据（2 分钟）

让 AI 帮你生成 3 篇测试文章：

const posts = [
  {
    id: 1,
    title: '我用 AI 做了第一个网页',
    excerpt: '零基础的我，花了一个下午时间，用 Cursor 做出了一个完整的个人主页...',
    date: '2026-06-01',
    content: '这是我的第一篇博客...'
  },
  { id: 2, title: 'Vibe Coding 初体验', excerpt: '...', date: '2026-06-06', content: '...' },
  { id: 3, title: '为什么我推荐 AI 编程给所有新手', excerpt: '...', date: '2026-06-08', content: '...' },
];

✅ 完成标志： 首页显示 3 篇你”写”的文章

✅ 你做到了

完成了博客的前端部分：

✅ 用 Vite + Vue 3 创建了项目
✅ 配好了 vue-router
✅ 用 AI 生成了 4 个完整组件
✅ 三条路由都能正常跳转
✅ 首页显示 3 篇文章，点击进入详情

💡 试试这些延伸挑战

现在博客的数据是写死在代码里的。试试问 AI：

“把文章数据改成从 localStorage 读取，这样刷新后数据还在” “给文章详情页加上上一篇/下一篇导航”

或者直接把项目发给朋友看——这是一个真实的、可以运行的网页！

目前数据是写死在代码里的。下一篇我们把后端和数据库接上，让数据真正动态起来，还能支持用户登录和发布文章。