零后端、零配置：用 AI 编程工具「Cursor」15 分钟上线「Vue3 留言墙」

每日一句正能量

不管雨下了多久，雨后都将会有彩虹，不管你有多悲伤，要坚信，幸福在等你。

---

一、为什么选择 Cursor？

在“百模大战”后的 2024，Cursor 把 GPT-4 直接嵌入 IDE，让开发者用自然语言就能驱动代码。

• 一句话生成组件：@Vue3 留言卡片，支持 emoji
• 实时 Diff 预览：改一行，浏览器实时刷新
• 零后端：本地 JSON 当接口，GitHub Pages 一键托管

目标：15 分钟完成一个 可上线 的留言墙系统，供同学/同事在线互动。

---

二、3 步搭骨架（2 分钟）

① 创建项目

打开 Cursor → 输入：

@create vue3 + vite project named ai-wall

30 秒后，目录结构自动生成：

ai-wall/
├── src/
│   ├── components/
│   ├── composables/
│   ├── App.vue
│   └── main.ts
├── vite.config.ts
└── package.json

② 安装依赖

一键命令：

npm install
npm run dev

浏览器自动打开 http://localhost:5173。

---

三、5 分钟生成核心组件

① 留言卡片组件

提示：

@add component MessageCard.vue
props: {id, author, content, date}
style: glassmorphism + emoji support

Cursor 生成 40 行代码 + SCSS：

② 数据来源：本地 JSON

新建 src/db.json：

[{"id":1,"author":"Alice","content":"AI 太酷啦！😎","date":"2024-06-09"},{"id":2,"author":"Bob","content":"15 分钟搞定👍","date":"2024-06-09"}
]

在 vite.config.ts 加一行，让 JSON 可被热更新：

export default defineConfig({plugins: [vue()],server: { proxy: { '/api': 'http://localhost:5173/src/db.json' } }
})

---

四、7 分钟完成业务逻辑

① 组合式 API：useMessage.ts

提示：

@add composable useMessage.ts
methods: addMessage, deleteMessage

Cursor 产出：

import { ref } from 'vue'
export function useMessage() {const list = ref([])const load = async () => {list.value = await (await fetch('/src/db.json')).json()}const add = (msg: Partial<Message>) => {list.value.unshift({...msg, id: Date.now()})}const remove = (id: number) => {list.value = list.value.filter(m => m.id !== id)}return { list, load, add, remove }
}

② 主页面 App.vue

<template><div class="wall"><h1>留言墙</h1><form @submit.prevent="handleSubmit"><input v-model="newMsg" placeholder="说点什么..." /><button>发送</button></form><MessageCardv-for="msg in messages":key="msg.id":msg="msg"@remove="remove"/></div>
</template><script setup>
import { ref } from 'vue'
import { useMessage } from './composables/useMessage'
import MessageCard from './components/MessageCard.vue'const { list: messages, load, add, remove } = useMessage()
load()const newMsg = ref('')
const handleSubmit = () => {if (!newMsg.value.trim()) returnadd({ author: '匿名', content: newMsg.value })newMsg.value = ''
}
</script>

---

五、一键部署（1 分钟）

npm run build
git init
git add .
git commit -m "feat: ai-wall"
git branch -M main
git remote add origin https://github.com/yourname/ai-wall
git push -u origin main

GitHub Pages 自动识别 dist 文件夹，30 秒即可访问：
https://yourname.github.io/ai-wall/

---

六、成品功能一览

功能	实现方式
发布留言	前端直接 push 到数组，热更新
删除留言	点击 ❌ 前端 splice
Emoji 支持	系统输入法 + input[type=text]
响应式	TailwindCSS flex 布局

---

七、踩坑 & AI 救援记录

问题	AI 提示	解决
JSON 热更新失败	@add vite plugin json	安装 vite-plugin-json
Emoji 乱码	无需处理，系统输入法自带
部署 404	@add gh-pages workflow	GitHub Actions 自动构建

---

八、可复用模板

仓库地址（含完整源码）：
https://github.com/AbrahamCaiJin/ai-wall

---

九、下一步可扩展

• 云端存储：接入 Firebase / Supabase，实现多人协作
• AI 摘要：用 GPT-4 给留言墙生成「今日日报」
• 主题皮肤：一键切换深色/浅色/节日风格

---

十、总结

Cursor 让「写代码」变成了「写提示词」。

• 描述需求 → AI 生成 → 人微调
• 15 分钟完成可上线的 Vue 小系统
• 零后端、零服务器，GitHub Pages 一键部署

把这份模板 fork 走，把留言墙换成「今日心情墙」「答题冲刺榜」「AI 日报」……让创意无限延伸！

转载自：
欢迎 👍点赞✍评论⭐收藏，欢迎指正