最近把一整套基于VUE的前端框架从零搭了出来，整个过程中Cursor这个AI编程工具承担了相当大比例的工作。说句实在话，用AI编程和纯手写完全是两种体验，前者更像是在带一个知识面很广但经验不足的实习生，你得告诉它方向、给它划重点、偶尔纠正它跑偏的思路，但效率确实翻了几倍不止。
这篇想把我用Cursor配合AI编程生成VUE前端框架的完整过程、踩过的坑、摸索出来的提示词技巧，还有那些网上一搜一大堆但实际照做没什么用的“教程”里不会说的细节，一次性整理出来。项目涉及中后台管理系统的典型功能，包括路由权限、动态菜单、数据看板、视频流播放这类真实业务场景，整套方案可以直接作为团队内部落地AI编程的参考。
先提醒一句，这篇文章不是Cursor的官方文档翻译，也不会去复读“AI编程是未来”这种车轱辘话。我会把实际操作中真正有用的配置方法、命令、提示词写法、问题排查思路都铺开来讲，读者不管是刚接触VUE的新手，还是已经在团队里推AI编程的技术负责人，都能在里面找到能直接用的东西。
1. 项目缘起：为什么选择用Cursor来生成前端框架
1.1 从传统开发到AI辅助开发的转变
这个项目最开始的需求并不复杂：为一个内部业务系统重新搭建前端框架，要求技术栈基于VUE 3 + Vite + TypeScript，需要支持动态路由、多角色权限控制、可复用组件库，还得兼容老系统里的m3u8视频流播放。如果是以前，我大概率会直接找一个成熟的开源前端框架（这类框架网上一搜也是一大堆，但很多要么太臃肿要么文档烂得没法看），然后在上面的基础上修修改改。
这次我决定换一种做法——用Cursor来生成这套框架。原因有两点：第一，团队里新同事对VUE生态不熟，想要一套结构清晰、注释到位、易于二次开发的代码；第二，项目中视频流播放、权限控制这些模块虽然不冷门，但细节很多，靠搜资料拼凑的效率太低。我希望通过AI编程直接把框架骨架搭起来，再针对业务需求做定制。
结果证明这个决策是对的。用Cursor写代码的速度确实快得惊人，某些模块的开发时间压缩到原先的三分之一甚至五分之一。但这个过程也不是一帆风顺，最大的挑战反而是“怎么问问题”——提示词写得好不好，直接影响生成代码的质量。
1.2 Cursor到底是什么，凭什么能用来做开发
Cursor本质上是一个基于VS Code二次开发的代码编辑器，最核心的能力是接入了AI大模型，可以在编辑器里直接通过对话方式生成代码、理解项目结构、修改已有文件。它和其他AI编程工具最大的区别在于，它能“看懂”整个项目的上下文，而不是像网页版AI那样只能根据你粘贴的代码片段做回答。
我用这个项目测试下来的感受是，Cursor在以下几个场景表现特别突出：从零搭建工程骨架、生成类型定义和接口请求层、根据描述生成组件代码、解释陌生代码、帮忙排查报错。它不太擅长的是处理需要强业务规则判断的逻辑，比如复杂的权限校验流程、多状态流转的状态机，这类东西还是需要人来把关。
不过这里要特别说明，Cursor尽管能力很强，但它不是万能的。它生成代码时会出现“一本正经地胡说八道”的情况，比如引用一个根本不存在的API、使用过时的依赖版本、或者写出来的代码拿TypeScript类型检查一跑全是错。所以用这个工具的前提是你至少得具备基础的代码能力，能判断它写得对不对，而不是无脑接受所有输出。
2. 环境准备：从安装到跑起来第一个VUE工程
2.1 Cursor安装与中文设置流程
Cursor的下载安装本身没什么难度，去官网下载对应操作系统的安装包，一路下一步就行。安装完成后首次启动，它会提示你登录账号，这一步建议直接做掉，理由后面解释。很多国内开发者在第一次打开时看到全英文界面就开始找“汉化包”，其实完全没必要——Cursor的语言设置为中文，方法很简单。
点击左下角的齿轮图标进入设置页面，搜索“locale”相关的选项，在语言配置里找到显示语言，切换为简体中文后重启编辑器即可。不过我的个人建议是，界面保持中文方便阅读，但提示词尽量用英文写。别误会，不是因为中文不好使，而是我大量测试下来的结论是：用英文编写提示词时，生成代码的规范性略微更好一些，尤其在变量命名、注释风格、代码结构这些方面。如果英语基础确实有限，中文提示词也能用，只是在代码细节上需要多检查几遍。
已登录状态下，一个比较容易被忽略的点是：Cursor的免费额度用完之后，使用体验会断崖式下降。免费版每过一段时间才会重置对话次数，如果项目工期紧张，建议直接订阅Pro版本，不要在这上面抠预算。生产力工具的投入产出比非常清晰，省下的时间远超订阅费。
2.2 用Node和Vite初始化VUE项目
Cursor装好、中文环境调好之后，继续准备VUE开发环境。VUE 3项目现在最主流的构建工具是Vite，它比Webpack快得不是一点半点。如果你还没有安装Node.js，先去Node官网下载长期支持版本（LTS版本，别装最新版）。Node环境有一套自己的版本匹配逻辑，VUE 3 + Vite要求Node版本至少是16以上，但版本太高也可能遇到兼容问题，经验之谈是装LTS版本最稳。
接下来我习惯在Cursor里直接打开终端执行命令，好处是后续让AI生成代码时它可以更好地结合真实项目环境分析问题，而不是脱离上下文瞎猜。创建新项目的命令是：
npm create vite@latest my-vue-app -- --template vue-ts
这条命令会生成一个基于Vite + VUE 3 + TypeScript的初始工程。执行完之后进入项目目录，安装依赖：
cd my-vue-app
npm install
到这里你得到的是一个最基础的工程骨架，接下来要做的是安装日常开发必备的依赖库。我会把常用依赖分成三类，方便你根据项目情况自行增删：第一类是路由相关，核心是vue-router，如果涉及国际化还可以配合vue-i18n；第二类是状态管理，老项目很多还在用vuex，新项目建议直接用pinia，更轻量且TypeScript加持更好；第三类是UI组件库，国内最流行的是Element Plus，国际化项目可以考虑Naive UI或者Ant Design Vue。
装完这些依赖，先执行一次构建命令确认基础工程没问题：
npm run dev
看到终端输出VITE准备就绪、本地服务地址后，用浏览器打开看看初始页面是否正常渲
3016
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
