Projet pratique Vibe Coding
Dans ce chapitre, nous allons pleinement démontrerVibe Codingtout le processus—non pas en s'enterrant dans le code, mais en décrivant les exigences en langage naturel et en laissant l'IA faire l'exécution.
L'objectif ultime est de construire une application web réelle et utilisable sans écrire une seule ligne de code.
D'abord, comprenez : Qu'est-ce que Vibe Coding exactement ?
Le nom « Vibe Coding » vient d'un tweet du cofondateur d'OpenAI, Andrej Karpathy.
Ce qu'il voulait dire, c'est :Vous vous immergez dans le « vibe » du produit, vous oubliez les détails du code, vous décrivez simplement ce que vous voulez, et l'IA l'implémente pour vous.
Quelle est la différence avec votre façon actuelle de programmer ?
| Programmation traditionnelle | Vibe Coding |
|---|---|
| Mémoriser la syntaxe et les API, consulter la documentation | Décrire l'intention en langage naturel, l'IA génère le code |
| Écrire ligne par ligne à la main, déboguer soi-même | Itérer avec des conversations à plusieurs tours, l'IA écrit + l'IA révise |
| Concevoir l'ensemble d'abord, puis écrire ligne par ligne | Travailler et ajuster au fil de la conversation, faire des modifications au fur et à mesure |
| Quand vous rencontrez un bug, chercher et réfléchir par vous-même | Jeter directement le message d'erreur à l'IA et la laisser corriger |
| Votre rôle estImplémenteur | Votre rôle estDesigner |
Le rythme de travail central de Vibe Coding
L'ensemble du processus de développement suit une boucle simple en trois étapes :
| Étape | Ce que vous faites | Ce que fait l'IA |
|---|---|---|
| 1. Planifier | Décrire les exigences et les objectifs | Analyser les exigences, proposer des solutions techniques |
| 2. Exécuter | Confirmer le plan, définir les contraintes | Générer du code, modifier les fichiers |
| 3. Vérifier | Lancer la vérification, contrôler les résultats | Corriger les erreurs, ajuster la sortie |
Après chaque étape, vérifiez-la ; une fois qu'elle est validée, passez à la boucle suivante.
C'est le secret central du Vibe Coding—Ne déversez pas toutes vos exigences sur l'IA en une seule fois ; au contraire, avancez par petites étapes, en confirmant la direction à chaque étape.
Préparation de l’environnement
Vous n'avez besoin que de trois choses, et elles sont toutes gratuites.
1. Éditeur VS Code
Lien de téléchargement :https://code.visualstudio.com
Tutoriel VS Code :https://www.example.com/vscode/vscode-tutorial.htmlVS Code prend en charge Windows / macOS / Linux et est entièrement gratuit.
2. GitHub Copilot (intégré à VS Code, aucune installation nécessaire)
La dernière version de VS Code intègre GitHub Copilot,Aucune extension n'a besoin d'être installée。
Nous n'avons qu'une seule chose à faire :
- Ouvrez VS Code et cliquez surl'icône de compte
- sélectionnezSe connecter avec GitHub, puis connectez-vous avec votre compte GitHub
- Une fois connecté, Copilot s'active automatiquement
Si vous n'avez pas de compte GitHub, allez d'abord surgithub.comet créez-en un gratuitement.
Lorsque vous ouvrez l'éditeur, vous verrez l'entrée Copilot—connectez-vous simplement avec votre compte GitHub, pas besoin d'installer des extensions depuis le marketplace.
Cliquez sur la petite icône dans le coin supérieur droit pour faire apparaître la fenêtre de chat Copilot :
3. Node.js
Lien de téléchargement :https://nodejs.org
Tutoriel Node.js :https://www.example.com/nodejs/nodejs-tutorial.html
Choisissez la version LTS, après l'installation ouvrez le terminal pour vérifier :
node -v # 应显示 v20.x.x 或更高 npm -v # 应显示 10.x.x 或更高
Découvrez quelques raccourcis clavier
Ces deux raccourcis sont ceux que vous utiliserez le plus :
| Raccourci | Fonction | Quand l'utiliser |
|---|---|---|
| Ctrl+I（Mac: Cmd+I） | Chat en ligne | Sélectionnez un bloc de code et demandez à l'IA de l'expliquer ou de le modifier |
| Ctrl+Shift+I（Mac: Cmd+Shift+I） | Panneau de discussion | Conversations longues liées au développement de nouvelles fonctionnalités |
| Onglet | Accepter la complétion | L'IA affiche une suggestion en gris ; appuyez sur Tab pour accepter |
| Esc | Rejeter la complétion | Si la suggestion de l'IA est incorrecte, appuyez sur Esc pour ignorer |
Lancement du projet : que construisons-nous ?
Maintenant, nous allons créer une application complètede gestion de tâches。
Liste des fonctionnalités
- Créer, modifier et supprimer des tâches
- Les tâches ont trois états : À faire, En cours, Terminé
- La priorité a trois niveaux : Haute (rouge), Moyenne (jaune), Basse (verte)
- Vue Kanban : faire glisser entre trois colonnes pour changer le statut d'une tâche
- Mode sombre : bascule en un clic
- Les données sont enregistrées automatiquement dans le navigateur (non perdues lors de l'actualisation)
- Fonctionne aussi sur mobile (mise en page responsive)
Sélection de la technologie
| À quoi ça sert | Quoi utiliser | Pourquoi le choisir |
|---|---|---|
| Framework front-end | Vue 3 | Facile à apprendre, communauté active, beaucoup de ressources chinoises |
| Outil de build | Vite | Démarrage rapide, officiellement recommandé par Vue |
| Styles | Tailwind CSS | Pas besoin d'écrire de fichiers CSS ; classes de style directement en HTML |
| Stockage de données | localStorage | Intégré au navigateur, aucun serveur backend nécessaire |
| Nom du projet | vibe-coding-example | Le nom de notre projet pratique |
Conversation du tour 1 : construire le squelette
Maintenant, nous commençons le vrai Vibe Coding—ne pas transmettre toutes les exigences à l'IA d'un seul coup, mais avancer étape par étape.
Étape 1 : créer le projet
Ouvrez le terminal et créez le projet :
npm create vite@latest vibe-coding-example -- --template vue
Ouvrez un nouveau terminal, entrez dans le projet, puis en suivant tailwindcss, utilisezcode .la commande pour ouvrir le projet dans VS Code :
cd vibe-coding-example npm install npm install -D tailwindcss @tailwindcss/vite code .
Maintenant, VS Code a ouvert le projet. Appuyez surCtrl+Shift+I(Mac: Cmd+Shift+I) pour ouvrir le panneau Copilot Chat. Il y a aussi un bouton de bascule du panneau dans le coin supérieur droit :
Étape 2 : Première conversation
Saisissez ce qui suit dans le panneau Chat, ce qui revient simplement à décrire ce que vous voulez en langage naturel :
我在开发一个任务管理 Web App，项目名 vibe-coding-example. 技术栈：Vue 3 + Vite + Tailwind CSS. 请帮我搭建项目骨架，创建以下文件： 1. src/types/task.ts — 定义 Task 类型 字段：id, title, description, status, priority, dueDate, createdAt status 可选值：'todo' | 'in-progress' | 'done' priority 可选值：'low' | 'medium' | 'high' 2. src/App.vue — 应用主页面 - 顶部导航栏（标题"Vibe Coding Example"） - 中间显示任务列表区域 要求： - 使用 Vue 3 script setup 语法 - 使用 Tailwind CSS 做样式 - 界面简洁干净，主色调用 indigo（靛蓝色） - 现在先用假数据展示，后面再接真实功能
L'IA produira le code morceau par morceau et modifiera le code du fichier. Vous cliquez surAccepterpour qu'elle l'écrive automatiquement dans le fichier.
Lorsqu'il demande d'exécuter une commande, il vous suffit de cliquer sur Autoriser :
Étape 3 : Vérifier
Une fois que l'IA a fini d'écrire le code, elle nous indiquera que nous pouvons l'exécuter dans le terminal :
npm run dev
Cliquez sur le bouton Ouvrir le terminal dans le coin supérieur droit, puis exécutez la commande dans le terminal :
Ouvrez http://localhost:5173 dans votre navigateur. Si vous voyez la page, la première étape a réussi.
Le résultat ressemble à ceci :
C'est le premier cycle de Planifier → Exécuter → Vérifier. Vous avez décrit l'objectif, l'IA l'a exécuté, et vous avez vérifié le résultat. Chaque cycle suivant suit ce rythme.
Vous êtes bloqué sur du code que vous ne comprenez pas ?
Vibe Coding ne vous oblige pas à comprendre chaque ligne de code. Mais si vous tombez sur un morceau de code que vous ne comprenez pas du tout, sélectionnez-le et appuyez surCtrl+I, puis tapez :
Explain in plain Chinese what this code does.
L'IA vous l'expliquera dans un langage que vous pouvez comprendre.
Conversation du tour 2 : Implémenter la liste de tâches et le formulaire
Le squelette fonctionne. Maintenant, implémentons les vraies fonctionnalités.
Étape 1 : Composant de carte de tâche
Continuez à taper dans le panneau Chat :
创建 src/components/TaskCard.vue 组件： 功能： - 展示单个任务的信息：标题、描述、优先级标签、截止日期 - 优先级用颜色区分：high 红色、medium 黄色、low 绿色（左边框即可） - 点击左侧复选框标记任务为完成（标题加删除线） - 右上角有删除按钮（× 图标） - 鼠标悬停时卡片微微放大（hover:scale-[1.02]） Props 接收：task（Task 类型） Emit 事件：toggle（切换完成状态）、delete（删除任务）
Après la génération de l'IA, conservez les points d'écriture de fichier, autorisez les points d'exécution de commande, et le résultat final :
Créez ensuite le conteneur de liste de tâches :
创建 src/components/TaskList.vue 组件： 功能： - 接收任务列表，用 TaskCard 展示每一项 - 任务按创建时间倒序排列（最新的在上面） - 顶部有状态筛选按钮：全部 / 待办 / 进行中 / 完成 - 没有任务时显示空状态提示："还没有任务，点击下方按钮创建第一个吧"
Étape 2 : Créer le formulaire de tâche
创建 src/components/TaskModal.vue 组件： 功能： - 点击"+ 新建任务"按钮打开弹窗 - 表单字段：标题（必填）、描述（选填）、优先级（下拉选择） - 标题为空时显示红色错误提示"标题不能为空" - 点击弹窗外的灰色遮罩关闭弹窗 - 按 ESC 键关闭弹窗 - 提交后用 emit 把新任务传给父组件 使用 v-model 绑定表单数据 使用 Teleport 把弹窗渲染到 body 下
Étape 3 : Assembler les composants
Mettez maintenant à jour App.vue pour combiner TaskList et TaskModal :
更新 src/App.vue： - 引入 TaskList 和 TaskModal 组件 - 使用 reactive 管理 tasks 数组（先用示例数据） - 实现 addTask 函数：接收 TaskModal 提交的数据，添加到 tasks 数组 - 实现 toggleTask 和 deleteTask 函数 - TaskModal 的显示/隐藏用 ref(false) 控制 示例数据包含 2 条任务，让页面看起来不空
Étape 4 : Vérifier
Testez-le manuellement dans le navigateur : créez une tâche → cliquez sur la case à cocher pour la marquer comme terminée → supprimez la tâche. Une fois que toutes les fonctionnalités fonctionnent correctement, passez au tour suivant.
Tour 3 de la conversation : Persistance des données
Maintenant, si vous actualisez la page, les tâches disparaissent. Nous devons stocker les données dans le localStorage du navigateur.
Indiquez vos besoins à l'IA
现在任务数据只存在内存里，刷新就没了。请把数据持久化到 localStorage： 1. 创建 src/utils/storage.ts： - saveTasks(tasks): 把任务数组存为 JSON - loadTasks(): 读取并解析 JSON，读取出错时返回空数组 - 存储键名：vibe-coding-example-tasks 2. 更新 src/stores/taskStore.ts： - 用 Vue reactive 管理状态 - 初始化时从 localStorage 加载数据 - 使用 watch 自动监听变化并保存（deep: true） - 导出 addTask、updateTask、deleteTask 函数 - 首次使用时如果没有数据，自动创建 3 条示例任务 3. 更新 App.vue，改为从 taskStore 获取数据和方法
Vérifier
# 在浏览器中： 1. 添加几条任务 2. 刷新页面 → 任务还在！ 3. 按 F12 打开开发者工具 → Application → Local Storage 4. 找到 vibe-coding-example-tasks，查看存储的 JSON 数据
Si les données ont disparu, collez les messages d'erreur de la console F12 à l'IA et laissez l'IA les corriger.
Tour 4 de la conversation : Vue Kanban
Description du besoin
我想添加一个看板视图（Kanban），文件：src/components/KanbanBoard.vue 功能： - 三列：待办 | 进行中 | 已完成 - 任务卡片显示在对应状态的列中 - 卡片可以拖拽到其他列（用 HTML5 原生拖拽 API） - 拖入新列时自动更新任务的 status - 在 App.vue 顶部加两个 Tab 按钮："列表"和"看板" - 切换时保持数据一致 注意：不需要引入任何拖拽库，用原生的 dragstart、dragover、drop 事件即可。
Une fois que l'IA a généré, vérifiez : faites glisser une carte de « À faire » vers « En cours » et confirmez que le statut de la tâche est mis à jour.
Tour 5 de la conversation : Mode sombre et adaptation mobile
Mode sombre
添加深色模式：创建 src/components/ThemeToggle.vue 功能： - 点击按钮切换亮色/深色模式 - 在 html 标签上添加/移除 dark class - 用 localStorage 记住用户选择（键名：vibe-coding-example-theme） - 首次访问时跟随系统设置（prefers-color-scheme） - 按钮放在导航栏右侧 同时给所有组件添加 dark: 前缀的深色样式。
Adaptation mobile
适配手机屏幕（375px 宽）： - 看板三列在手机上改成竖向单列布局 - 任务模态框在手机上改成从底部滑出的样式 - 所有按钮的点击区域不小于 44px - 表单输入框字号不小于 16px（防止 iOS 自动缩放） - 导航栏在手机上用汉堡菜单 使用 Tailwind 的响应式类：sm: md: lg:
Vérifiez : appuyez sur F12 dans le navigateur, passez en mode mobile (375px) et vérifiez chaque page une par une.
Que faire lorsque vous rencontrez un bug : Le modèle universel de débogage
Voici la « trousse de premiers secours » de Vibe Coding — chaque fois que vous rencontrez une erreur, utilisez directement ce modèle :
I've encountered a problem, help me fix it: [Error Message] Paste the complete error from the terminal or browser console here. [What I Want to Achieve] Describe what you expect to happen. [What I've Already Tried] List the operations you've tried but that didn't solve the problem.
L'IA localisera automatiquement le problème à partir du message d'erreur et proposera une correction. Vous n'avez pas besoin d'analyser la cause vous-même.
Faites relire votre code par l'IA
Après avoir terminé une fonctionnalité majeure, saisissez ceci dans le Chat :
请审查我当前项目的代码，重点检查： 1. 有没有安全风险 2. 有没有性能问题 3. 错误处理是否完整 4. 有没有可以简化的地方
L'IA énumérera les problèmes et les suggestions de correction un par un. C'est quelque chose que seuls des développeurs expérimentés pourraient faire — mais avec l'IA, vous pouvez le faire aussi.
Déployer et mettre en ligne
Le projet est terminé ; la dernière étape consiste à le mettre en ligne pour que tout le monde puisse y accéder.
Poussez vers GitHub
$ git init $ git add . $ git commit -m "feat: vibe-coding-example 任务管理应用" # 在 github.com 创建同名仓库后： $ git remote add origin https://github.com/你的用户名/vibe-coding-example.git $ git push -u origin main
Déployer sur Vercel
- Visitezvercel.com, connectez-vous avec votre compte GitHub
- Cliquez sur Add New Project et sélectionnez le dépôt vibe-coding-example
- Sélectionnez Vite pour Framework, puis cliquez directement sur Deploy
- Attendez 1 à 2 minutes pour obtenir votre domaine xxxx.vercel.app
Envoyez le lien à vos amis, et ils pourront utiliser votre application.
Résumé de Vibe Coding
La formule pour écrire de bons prompts
Un bon prompt =Objectif + Contraintes + Contexte
| Non recommandé | Recommandé |
|---|---|
| Aide-moi à créer une liste de tâches | Créez un composant TaskList.vue. Fonctionnalités : afficher une liste de tâches avec titre, statut et libellés de priorité. Utilisez Tailwind CSS, avec les données transmises via props. N'introduisez pas de bibliothèques d'interface utilisateur tierces. |
Rythme d'itération
每次对话 → 只做一个功能 每次修改 → 立刻在浏览器里验证 每个功能完成 → 立刻 git commit 每天结束 → push 到 GitHub
N'accumulez pas de nombreuses modifications et ne les testez pas toutes d'un seul coup ; c'est juste vous attirer des ennuis.
Ne confiez pas ces éléments à l'IA
- Accepter du code sans le regarder du tout — sachez au moins quels fichiers ont été modifiés
- Quand l'IA dit « ce code présente des risques de sécurité », prenez-le au sérieux
- Ne pas tester manuellement chaque fonctionnalité avant la mise en production