1.VS Code中安装claude code插件

在插件管理中搜索claude code，认准官方Anthropic产品

成功了！

2.IDEA中安装claude code

在插件管理中搜索claude code，认准官方Anthropic产品

3.使用claude搭建一个VUE3前端（学生管理系统)

使用vscode创建一个vue3的项目 创建一个文件夹（存放前端项目)

使用VScode打开文件夹，打开终端输入：vue create XXXX

出现报错，使用命令：npm install -g @vue/cli

安装完成vue-cli，再次使用命令：vue create XXXX

我创建的是VUE3项目，等待完成创建

使用/init命令，验证claude的工作目录是我们的当前文件

尝试让claudecode进行页面代码的生成 命令：请帮我生成一个学生管理系统的登录和注册页面，需要分为学生登录和教职工登录和管理员登录，注册也要相对不同，学生用（学号，密码），教职工用（教职工号，密码），同时帮我生成对应的表设计把数据库的生成代码写在（登录和注册页面的数据库.md）中

途中可能会有很多情况需要我们确认和选择，大概就是涉及后端采用什么技术进行对接，我选择springboot,MySQL等技术。一定要确保自己的API_KEY账号有余额！！！

完成了，登录和注册页面，同时也帮我们生成了（登录和注册页面的数据库.md）

然后我们请claude帮我们生成一个系统的首页，我这里有一张原型图

类似这样的管理系统 命令：参考图片，请帮我生成一个这样的管理系统首页（尽量美观精致)，左边菜单栏先设计有首页/学生管理（班级信息、学生信息)/教职工管理（部门信息、教职工信息)/管理员（管理员信息)，班级管理页面的显示信息包括（班级名称，班主任，班主任电话，最后更新时间，操作（编辑/删除))，学生信息页面显示信息包括（姓名，学号，头像，班级名称，性别，手机号，最后操作时间，操作（编辑/删除))，部门信息页面显示信息包括（部门名称，最后操作时间，操作（编辑/删除))，教职工信息页面显示信息包括（姓名，教职工号，性别，头像，所属部门，职位，入职时间，最后操作时间，操作（编辑/删除))，管理员信息页面的显示信息包括（用户名，头像，最后操作时间，操作（编辑/删除))，大概先想到这些，帮我生成对应的页面，同时帮我想好有什么接口，需要的表有哪些，帮我生成对应的接口文档和数据库表设计和代码，分别命名为xx接口文档.md和xx数据库表设计.md。

如果自己选的模型不支持图片，那么直接把命令给它就好，也是可以完成的。余额一定要充足！！！ 等了许久，终于好了，查看设计的页面（可能claude设计时候有拦截，要先登录才能看到后台页面，可以把诉求给claude

页面出现了！！！！

页面设计不是很美观，但是效果还行，可以继续通过对话进行调整。

之后可以直接让claude生成页面的接口和相关数据库表的设计分别写在md文件中。（看自己需求和token!!!!) 我后面我又进行了页面设计的调整：1.分为3类用户登录（学生、教职工、管理员)重新设计登录界面不需要注册界面2.学生只能看到自己的信息，教职工可以看到学生和自己的信息，管理员可以看到所有的信息3.帮我生成页面的接口和相关数据库表的设计分别写在md文件中。

4.使用Mysql数据库创建相应的表

5.使用claude搭建springboot后端系统

创建maven项目

创建成功

记得修改settings里的maven仓库

把我们的数据库设计.md和接口文档.md给到claude，完成整个系统的构建，token太贵了！！！！！博主的token燃尽了，未完待续。。。（大家可以去试试）