【AI】使用Cursor和AI编程生成的VUE前端框架

清欢渡hb

墨衍会员 · AI 创作全网分发码龄11年

关注

VIP免费原创 2025-02-15 20:47:27 9.8k 阅读 AI 写同款· GEO 优化 ›

《Cursor-AI编程》基础篇-简介 Cursor是一款当下非常受欢迎的AI编程编辑器。它基于广受开发者喜爱的开源编辑器VSCode进行二次开发，并在其基础上增加了强大的AI功能，帮助开发者更高效地编写代码，提升效率！阅读详情

【AI】使用Cursor和AI编程生成的VUE前端框架

引言

在当前的技术发展中，人工智能(AI)以其强大的计算能力和智能化的特点，正逐步渗透到软件开发的各个领域。本文将介绍一个完全由AI生成的VUE前端框架项目，该项目涵盖了登录、图形验证码、权限校验、系统用户模块、系统角色模块和功能权限模块等基础功能。值得注意的是，项目里的代码均是通过与Cursor AI的交互生成，展示了AI编程在前端开发中的实际应用和优势。

你可以访问该项目的Git地址以了解更多详细信息：
Vue Demo on Gitee

1. 项目概述

本项目是一个基于VUE.js的前端框架，结合了登录、图形验证码、权限校验等常用功能模块。通过与Cursor AI交互生成的代码，展示了AI在编程中的潜力与效率。

2. 使用Cursor AI编程

Cursor是一款智能编程工具，通过与AI的交互，开发者可以轻松生成高质量的代码。而在本项目中，每一行代码都由Cursor AI生成，实现了从架构设计到代码编写的全自动化。
2.1 使用Cursor的规则

为了最大限度地发挥Cursor AI的能力，开发者在使用过程中应遵循以下规则：

明确需求：在与Cursor AI交互之前，确保你已经明确了需要生成的代码的具体功能和需求。
分阶段生成：将复杂的功能分解成多个小的子功能，逐步引导Cursor生成代码。这样不仅能更好地控制代码质量，还能更容易发现并修正生成过程中的错误。
验证和测试：每次生成代码后，及时进行单元测试和集成测试，以确保代码的正确性和功能完整性。
保持一致编码风格：虽然代码是由AI生成的，但通过设置和规范代码格式，可以保持项目的一致性和可读性。
持续学习和反馈：学习和运用Cursor AI的最新特性和改进，并在使用过程中提供反馈以帮助其不断优化。

2.2 编程技巧

以下是一些在使用Cursor AI生成代码过程中实用的编程技巧：

提供详细注释：在描述需要生成的代码时，尽量提供详细的需求描述和注释，帮助Cursor更准确地理解和生成代码。
利用示例代码：提供一些示例代码片段，作为Cursor生成代码的参考，这有助于提高生成代码的准确性和一致性。
逐步调试：在生成复杂模块前，逐步生成并调试各个子模块，确保每一部分功能正确，再进行模块集成。
利用版本控制：在每次生成和修改代码后，使用版本控制系统（如Git）记录变更，便于追踪和回滚。

2.3 .cursorrules使用技巧

官方提供agent方面生成规则：
https://cursorrules.agnt.one/chat

项目中的VUE规则：

# JavaScript Frameworks
- 使用Vue 3.0作为基础核心框架。
- 使用Pinia进行跨页面数据状态管理。
- 使用Vue Router进行页面路由切换。

# UI Framework and Styling
- 使用ArcoDesign作为UI框架，简化组件开发。
- 使用TailwindCss作为CSS框架，以便简化CSS编写。

# Compilation and Build Tools
- 使用Yarn作为依赖包管理工具。
- 使用Vite作为Vue的构建工具。

# Other Tools
- 使用Fetch接口来实现前端请求。
- 使用Vue Flow库快捷构建流程图。
- 使用Vue Markdown将大模型输出的Markdown转为HTML。
- 使用ECharts将数据转换为统计图表。

# Directory Structure
- 根目录 `/vue-demo` 包含项目的基本结构。
- `/node_modules`: 项目依赖模块。
- `/public`: 包括公共文件，如 `favicon.ico` 和入口 HTML 文件 `index.html`。

## Source Directory (/src)
- `/assets`: 存放静态资源。
- `/assets/images`: 图片资源目录。
- `/assets/styles`: 全局样式配置，包括 `tailwind.css`。
- `/components`: 共享组件的存放目录（优先使用自己定义的组件）。
- `/composables`: 自定义 Hook 函数或组合式 API 的实现（优先使用自己定义的函数或者组合式API）。
- `/config`: 项目配置文件，如环境变量和全局设置。
- `/layouts<