介绍经验之前给大家介绍一下什么事vibe coding什么是Vibe Coding?Vibe Coding 是一种新兴的编程范式,强调开发者与代码之间的"氛围感"和直觉式交互。它不仅仅是编写代码,更是一种与代码共舞的艺术形式。起源与背景Vibe Coding 概念源于现代软件开发中对效率与创造力平衡的追求。随着AI辅助编程工具的普及,开发者开始重新思考编程的本质:不再是机械的逻辑堆砌,而是一种创造性的表达方式。核心理念感性与理性并重:既要有严谨的逻辑思维,也要有敏锐的直觉感知人机协作:充分利用AI工具,但保持人类的创造性主导地位可持续发展:注重长期的代码质量和开发者体验社区驱动:通过分享和交流不断完善编程实践核心概念1. 直觉优先 (Intuition First)Vibe Coding 认为最优秀的代码往往来自于开发者的直觉和经验,而非过度设计。它鼓励开发者:跟随第一感觉编写代码相信肌肉记忆和模式识别减少过度思考,增加流畅度培养"代码嗅觉",快速识别问题和机会实践技巧:// 直觉驱动的重构示例 // 原始代码(感觉"不对劲") function processDa
提示词写的好不好决定了我们本身这个项目通过ai工具编程出来的效果好不好, 所以我们给AI编程工具制定的提示词、project_rule、user_rule、agent_rule 的前置提示词信息,就是十分重要了。当然我也是一步一步踩坑过来的,参考了这些网站的配置cursor开发规则提示词工程指南claude.md"Develop a WeChat Mini Program for a watermark camera with check-in functionality. The core feature should enable users to take photos while automatically capturing: 1) GPS coordinates (latitude/longitude) from WeChat's location services, 2) Nearby address information queried from the coordinates, 3) Current timestamp (year-month-day
引言在AI辅助软件开发的时代,提示词工程(Prompt Engineering)已成为提升开发效率和代码质量的关键技术。本文基于微信小程序水印相机项目的实际开发经验,深入探讨如何设计和配置有效的提示词工程体系。提示词工程的核心价值1. 需求转化的桥梁提示词工程的首要价值在于将模糊的业务需求转化为AI可理解的精确指令。在我们的项目中,原始需求"开发一个水印相机"被细化为:"Develop a WeChat Mini Program for a watermark camera with check-in functionality"这种转化不仅明确了技术栈(微信小程序),还定义了核心功能(水印+打卡),为后续开发奠定了清晰的方向。2. 功能分解的工具优秀的提示词能够将复杂功能分解为可执行的具体任务:位置服务集成GPS coordinates (latitude/longitude) from WeChat's location servicesNearby address information queried from the coordinatesCurrent
近两年大语言模型跟AI编程十分的火热。自己也花了很多的时间通过VScode上包括各种ai编程助手包括copilot、通义千问、cline等。之前的应用里面主要是针对项目内的需求做一些单元测试、explain、fix的部分工作。今年cursor的编程工具也全面爆发了,各大厂商都纷纷投入这个赛道。尤其今年智能体、mcp发展起来了之后感觉越来越方便,其能力也更为强大。最近我开始全面进行ai完整来开发。也写个例子给大家参考项目背景在移动互联网时代,位置打卡和照片分享已成为日常生活的重要组成部分。无论是工作考勤、旅游记录,还是社交分享,人们都希望能够在照片中记录准确的时间和地点信息。基于这一需求,我们开发了一款功能完善的微信小程序水印相机。核心功能设计1. 智能定位与地址解析项目的核心亮点在于自动获取用户位置信息:GPS坐标获取:利用微信小程序的地理位置API,实时获取用户的经纬度坐标地址逆解析:通过坐标信息查询详细的地址描述,为用户提供可读性强的位置信息时间戳记录:精确到分钟的时间记录,确保打卡信息的准确性2. 专业级拍照体验为了提供媲美专业相机的拍照体验,我们实现了:多方向支持横屏和竖屏模式
Golang实现消息队列系统:RabbitMQ和NSQ的对比分析消息队列是现代分布式系统中不可缺少的一部分,通过消息队列可以实现不同服务之间的松耦合,提高系统的可扩展性和可靠性。Golang是一门非常适合编写高并发、分布式应用的语言,这里就来对比分析一下Golang实现的两个流行的消息队列系统:RabbitMQ和NSQ。1. RabbitMQRabbitMQ是一个基于AMQP(高级消息队列协议)协议的消息队列系统,使用Erlang语言编写。RabbitMQ可以轻松地实现异步消息传输、工作队列、发布/订阅、路由、消息确认等特性。RabbitMQ也支持多种客户端,包括Golang。使用Golang连接RabbitMQ主要是通过RabbitMQ Golang客户端,它提供了简单、易用的API来发送和接收消息。同时,RabbitMQ客户端也支持Golang的并发模型和协程,并且提供了可靠性、消息确认等一系列特性。在RabbitMQ中,消息的发送和接收过程涉及生产者、交换器、队列和消费者。以下是RabbitMQ的交互流程图:生产者 ----> 交换器 ----> 队列 ---->
不管是通过DDD方法论设计新服务还是梳理老服务,绕不开的一点就是接口设计。接口设计时很容易犯的一个错就是经常会根据接口调用方的个性化场景(比如多种界面展示)设计出很多类似且重复性的接口,且接口的实现逻辑割裂、复用性差。为了让业务服务更加聚焦领域能力,根据领域能力设计对外接口,同时又要满足多样化的接口消费场景如前端展示,架构里往往需要引入BFF这一层。在用户体验至关重要的今天,程序展示界面丰富多样。比如同一个界面可能同时存在极简版、专业版,一个界面要展示多种数据,要连接的设备也层出不穷如小程序、APP、网页、客户端等等。归纳起来有这几类:这些需求如果都在前端完成,则前端需要多次网络请求服务端数据,并且接口相关的适配逻辑不适合用前端技术来处理,效率不会高。但是如果一股脑丢到服务端来处理,则服务端模块的接口频繁修改带来稳定性下降。模块界限会变模糊,接口数量膨胀厉害。展示逻辑和领域逻辑混杂在一起,久而久之业务逻辑将变得难以维护。从DDD角度看,提倡围绕领域业务能力进行接口设计,服务端应该聚焦领域自身能提供什么样的能力来设计接口,而展示相关的处理逻辑不应该是领域业务。因此可以得出这里的主要矛盾是
核心知识点要牢记并且,面试回答流畅,对于知识点的回答有加分点更好。一、万能答题结构(STAR-R 法则)S - Situation:背景 / 面试官为什么问 T - Task:要解决的问题 A - Action:你的解决方案 / 原理 R - Result:效果 / 适用场景 R - Reflection:你的深入思考 / 最佳实践二、各模块复习优先级阶段重点3-5 年React Hooks、Vue 响应式、TS 基础、Webpack 基础5-8 年Fiber、Concurrent、SSR/SSG、微前端、性能优化体系8 年+框架原理、编译原理、跨端架构、工程体系设计三、高频加分项能讲清 React Fiber 调度原理;能手写 响应式核心 5 行(track / trigger);能说出 3 种以上首屏优化方案并量化收益;能解释 Vite 为什么比 Webpack 快;能画出 webpack 构建流程图;能列举 5 种以上 TypeScript 高级类型。四、推荐学习资源React 官方文档(新版含并发模式讲解);Vue 3 官方文档 + 源码阅读;TypeScript 官方 Han
E1:package.json 中 devDependencies 和 dependencies 区别?字段说明打包是否包含dependencies运行时依赖,项目运行必需是devDependencies开发时依赖,仅本地开发、测试、构建需要否peerDependencies同伴依赖,期望使用者提供由宿主安装optionalDependencies可选依赖,安装失败不报错由宿主选择示例:{ "dependencies": { "vue": "^3.4.0", // 运行必需 "axios": "^1.6.0" }, "devDependencies": { "vite": "^5.0.0", // 构建工具 "typescript": "^5.3.0", "@types/node": &q
P-OPT1:<script> 放在 header 和 body 底部的区别?位置区别header 中浏览器遇到 <script> 会同步加载并执行,阻塞后面 DOM 解析(脚本可能 document.write 改变 DOM),白屏时间长。body 底部DOM 解析完成后才加载脚本,页面元素先显示出来,用户感知更快。进阶方案:<!-- defer:并行下载,DOMContentLoaded 前执行 --> <script src="app.js" defer></script> <!-- async:并行下载,下载完立即执行(不保证顺序) --> <script src="analytics.js" async></script> <!-- type="module":默认 defer 行为 --> <script type="module" src="app.js"&
P1:使用 Promise 实现红绿灯交替重复function trafficLight(times: number, order: string[] = ['red', 'yellow', 'green']) { const delay = (ms: number) => new Promise(res => setTimeout(res, ms)); const lights: Record<string, number> = { red: 3000, yellow: 1000, green: 2000 }; return new Promise<void>(async resolve => { for (let i = 0; i < times; i++) { for (const color of order) { console.log(color); await delay(lights[color]); } } resolve();
小码哥
十年老程序员
粤ICP备2023052298号-1