高质量 AI 提示词之（从 0-1 开发 Vue 项目）

高质量 AI 提示词之（从 0-1 开发 Vue 项目）

注意：（具体的提示词要根据项目的需求来进行更改） 以下是vue项目的开发流程

一、技术栈选择

提示词：

"我要从零开发一个 [项目类型，比如电商 APP、企业管理后台、个人博客]，

预计会有 [用户量，比如几百人用、几万人用]，

核心要实现 [3 个左右核心功能，比如用户能下单付款、管理员能看数据报表、访客能评论]。

请帮我选合适的 Vue 技术组合，包括用 Vue2 还是 Vue3、用 Vite 还是 Webpack 搭项目、用 Vue Router 哪个版本管页面跳转、用 Pinia 还是 Vuex 存数据、用 Element Plus 还是 Ant Design Vue 做界面，并说明选这些的原因，以及可能遇到的技术问题和解决办法。"

二、项目初始化

提示词：

"我确定用 [已选技术栈，比如 Vue3+Vite+Vue Router4+Pinia+Element Plus]。

请告诉我详细的初始化步骤：从输什么命令创建项目开始，到用 npm 和 yarn 分别怎么装依赖，项目里 src 文件夹下的 components（放组件）、views（放页面）、router（管路由）、store（存数据）这些文件夹是干嘛的，还有 vite.config.js、package.json 这两个文件里要改哪些关键配置，改的时候要注意什么。"

三、基础配置

（一）环境配置

提示词：

"我用 Vue3+Vite 开发，需要区分开发（自己测试）、测试（给测试人员用）、生产（给用户用）三个环境，

比如不同环境调用不同的接口地址、开发环境能看调试信息。请告诉我怎么建.env 文件，文件名有什么规矩，环境变量怎么写（比如要不要加 VITE_前缀），代码里怎么拿这些变量，还有 package.json 里怎么写命令切换环境。"

（二）路由配置

提示词：

"我的 Vue 项目用 Vue Router4，要实现：

1. 点按钮或链接跳页面；

2. 比如商品详情页，能根据不同商品 ID 显示不同内容；

3. 像管理后台，侧边栏点不同选项，右侧显示对应的子页面；

4. 没登录的用户不让进个人中心、进某些页面离开时提醒。请给我完整的 router/index.js 代码，包括怎么定义路由规则、怎么写守卫，组件里怎么用router跳页面、用router跳页面、用router跳页面、用router-link 做链接，关键代码解释下，还有要注意的地方。"

（三）状态管理配置

提示词：

"我用 Pinia 存数据，要存 [需要存的数据，比如用户信息、购物车商品、商品列表]。请告诉我：

1. 怎么在 main.js 里引入 Pinia；

2. 怎么建 userStore（存用户数据）、cartStore（存购物车）、productStore（存商品）这些模块，每个模块里怎么定义要存的状态、怎么写计算属性（比如算购物车总件数）、怎么写方法（比如异步拿用户信息、同步加商品到购物车）；

3. 组件里用选项式 API 和组合式 API 分别怎么用这些 Store；

4. 说下 Pinia 和 Vuex 的区别，用 Pinia 时怎么让性能更好（比如别瞎更新数据、合理用计算属性存数据）。给我完整代码，关键地方加注释。"

四、UI 与页面开发

（一）UI 组件库集成

提示词：

"我在 Vue3 项目里装了 Element Plus，要做：

1. 全局引入（所有组件都能直接用）和按需引入（用哪个装哪个）两种配置，按需引入要装什么插件、vite.config.js 怎么改；
2. 改主题，比如把按钮颜色改成公司品牌色、改字体大小，用 SCSS 变量改和用自定义文件改分别怎么做；
3. 用 Element Plus 的图标，怎么全局注册所有图标，怎么在组件里单独用某个图标；
4. 4. 解决 Element Plus 样式和我自己写的样式冲突。每个操作给步骤和代码，说下不同方法的好坏，方便我选。"

（二）页面布局

提示词：

"我要做 [页面类型，比如电商首页、管理后台首页]，布局要求：

1. 布局结构，比如电商首页要有顶部导航栏、轮播图、商品分类区、底部信息；管理后台要有左侧菜单、顶部操作栏、中间内容区\]；

2. 用 [布局方式，比如 Flex 布局、Grid 布局、Element Plus 的布局组件]。请给我完整的 Vue 组件代码，包括 HTML 结构、JS 逻辑（比如怎么判断屏幕大小改布局）、CSS 样式（不同屏幕尺寸的样式），用 Element Plus 组件辅助，比如用 el-menu 做导航、el-carousel 做轮播图，还要说下做布局时难的地方怎么解决（比如侧边栏怎么折叠、怎么让各区域高度自适应）。"

（三）业务组件开发

提示词：

"我要做一个 [组件功能，比如商品卡片、登录表单、购物车加减器]，需求：

1. 功能点，比如商品卡片要显示图片、名字、价格，点卡片跳详情页，鼠标放上去显示加购按钮；登录表单要填用户名和密码，能勾选记住密码，点登录按钮验证（用户名不能为空、密码至少 6 位）\]；

2. 交互逻辑，比如购物车加减器点加号数量加 1，点减号不能小于 1，数量变了要告诉父组件\]。请给我完整代码（用组合式 API），包括定义 props（接收父组件数据）、emits（给父组件传事件）、HTML 结构、JS 逻辑、CSS 样式，说下父组件怎么引入这个组件、怎么传数据、怎么监听事件，还要考虑这个组件能不能复用、以后好不好维护。"

（一）请求工具配置

提示词：

"我的 Vue 项目要调用后端接口，用 axios。请告诉我：

1. 怎么创建 axios 实例，怎么配置接口基础地址（能自动切换环境）、请求超时时间、请求头（比如设 Content-Type 为 application/json）；

2. 请求发出去前，怎么自动加 token（从 localStorage 或 Pinia 里拿）、处理参数（比如数组参数怎么传）；

3. 收到响应后，怎么只拿 data 里的有用数据，遇到 401（没权限）跳登录页、403（没权限）弹提示、500（服务器错）弹提示；

4. 怎么封装 get、post、put、delete 方法，让组件里调用更简单；

5. 组件和 Pinia 的 actions 里怎么用这个封装好的工具。给我 src/utils/request.js 的完整代码，关键地方加注释，还要说配置时要注意的问题（比如 token 过期了怎么办、跨域怎么配合后端解决）。"

（二）接口调用与数据处理

提示词：

"我的项目 [功能模块，比如商品列表模块、用户中心模块] 要调用后端两个接口：

1. 接口 1，比如 GET 请求 /api/product/list，传页码、每页条数、分类 ID，返回总条数和商品列表（每条有 ID、名字、价格、图片）\]；2. \[接口 2，比如 POST 请求 /api/user/update，传用户名、头像地址，返回成功与否和提示信息\]。请告诉我：

2. 怎么处理返回数据（比如商品价格保留两位小数、过滤掉无效商品、时间戳转成正常日期）；

3. 没网、请求超时、返回数据为空时怎么处理（比如弹没网提示、超时重试、数据为空显示 "暂无数据"）。给我 Store 和组件的完整代码，说下数据从调用接口到显示在页面的过程，还有怎么让接口调用更快（比如存缓存、别重复发请求）。"

六、优化与测试

（一）性能优化

提示词：

"我的 Vue3+Vite 项目现在 [性能问题，比如页面打开慢、滑动卡顿、打包后文件太大]。请从这几个方面给优化方案：

1. 代码上怎么优化（比如组件和路由怎么设置懒加载、怎么避免组件重复渲染、长列表怎么用 vue-virtual-scroller 优化）；

2. 资源怎么优化（比如图片怎么压缩、用 WebP 格式、滚动到才加载，CSS 怎么提公共样式、避免冲突、删没用的，JS 怎么拆分、删没用的代码、第三方库按需引入）；

3. 打包怎么优化（比如 Vite 的 build.rollupOptions 怎么配置、怎么压缩代码、怎么拆分文件，怎么用 CDN 引入 Vue、Element Plus 这些库，步骤和注意事项）；

4. 运行时怎么优化（比如 Pinia 别存太多全局数据、用事件委托减少绑定、少操作 DOM）。每个优化点给具体步骤和代码（比如改组件懒加载的代码、改 Vite 配置），说下优化后能有什么效果（比如打包文件小一半、页面打开快 2 秒）。"

（二）项目测试

提示词：

"我要测试 Vue3 项目，确保功能没问题、稳定。请给详细测试方案：

1. 单元测试（用 Jest+Vue Test Utils）：怎么配置环境，怎么测组件（比如测组件能不能正常显示、父组件传数据能不能收到、点按钮能不能触发事件）、测 Pinia（测存的数据对不对、计算属性算得对不对、方法能不能正常执行）、测工具函数（比如格式化价格的函数对不对），给测试代码示例和执行测试的命令；

2. 端到端测试（用 Cypress）：怎么配置环境，怎么写测试用例（比如测用户登录流程、加商品到购物车流程、提交订单流程），给代码示例、怎么运行、怎么看报告；

3. 怎么统计测试覆盖率（Jest 和 Cypress 怎么配置），怎么看报告知道哪些没测到，怎么补测；

4. 测试时常见问题（比如测组件时怎么模拟接口请求、测流程时遇到动态数据怎么办、测试环境和生产环境不一样怎么处理）和解决办法。每个测试类型给详细步骤和代码，帮我快速上手测试。"

七、项目部署

（一）打包与部署准备

提示词：

"我的 Vue3+Vite 项目开发完了，要打包和准备部署。请告诉我：

1. 打包前要检查什么（比如环境变量对不对、测试环境功能正常吗、有没有没删的调试代码）；

2. 怎么执行打包命令（比如打包生产环境用什么命令），打包时遇到 "缺依赖""语法错" 这些错误怎么解决；

3. 打包后的 dist 文件夹里，index.html、static、js、css 这些文件是干嘛的，怎么用 vite-bundle-visualizer 插件看哪个依赖占空间大，怎么根据结果再优化打包（比如把大的第三方库分开、删没用的资源）；4. 如果部署到不是网站根目录的地方，vite.config.js 和路由里的 base 配置怎么改，如果用 nginx 部署要准备什么配置文件。每个步骤给具体命令和代码修改示例，说下要注意的地方，确保打包后能正常部署。"

（二）部署方案

提示词：

"我要把项目部署到 [部署目标，比如自己的服务器（用 nginx）、阿里云、GitHub Pages]。请给详细方案：

1. 准备工作（比如服务器要装 nginx、阿里云要建 ECS 实例或 OSS 存储、GitHub Pages 要建仓库）；

2. 部署步骤（比如服务器部署：怎么把 dist 文件夹传到服务器、nginx 怎么配置（设端口、指静态文件路径、解决刷新 404、处理跨域）、怎么启动 nginx 并测试；阿里云部署：怎么传 dist 文件、怎么设反向代理、怎么解析域名；GitHub Pages 部署：package.json 里怎么设 homepage、怎么用 gh-pages 插件推 dist 文件、怎么在 GitHub 仓库设 Pages）；

3. 部署后怎么验证（比如输域名或 IP 看页面能不能打开、功能正常吗、有没有资源加载失败）；4. 部署后怎么维护（比如要更新项目怎么操作、怎么看服务器日志找问题、怎么配置 HTTPS 让网址显示小绿锁）。每个步骤给具体命令、配置文件代码（比如 nginx 配置），说下部署时常见问题（比如跨域、刷新 404）怎么解决。"