零后端、零配置：用 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>
    <MessageCard
      v-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()) return
  add({ 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/

六、成品功能一览

七、踩坑 & AI 救援记录

八、可复用模板

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

九、下一步可扩展

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

十、总结

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

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

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

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