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

文章目录

- 每日一句正能量
- [一、为什么选择 Cursor？](#一、为什么选择 Cursor？)
- [二、3 步搭骨架（2 分钟）](#二、3 步搭骨架（2 分钟）)
- - [① 创建项目](#① 创建项目)
  - [② 安装依赖](#② 安装依赖)
- [三、5 分钟生成核心组件](#三、5 分钟生成核心组件)
- - [① 留言卡片组件](#① 留言卡片组件)
  - [② 数据来源：本地 JSON](#② 数据来源：本地 JSON)
- [四、7 分钟完成业务逻辑](#四、7 分钟完成业务逻辑)
- - [① 组合式 API：useMessage.ts](#① 组合式 API：useMessage.ts)
  - [② 主页面 App.vue](#② 主页面 App.vue)
- [五、一键部署（1 分钟）](#五、一键部署（1 分钟）)
- 六、成品功能一览
- [七、踩坑 & AI 救援记录](#七、踩坑 & AI 救援记录)
- 八、可复用模板
- 九、下一步可扩展
- 十、总结

每日一句正能量

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

一、为什么选择 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

② 安装依赖

一键命令：

bash 复制代码

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：

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 可被热更新：

ts 复制代码

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 产出：

ts 复制代码

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

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 分钟）

bash 复制代码

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 日报」......让创意无限延伸！

转载自：<>

欢迎 👍点赞✍评论⭐收藏，欢迎指正