title: 初识 Claude Code用自然语言打造第一个 BS 架构 Web 页面date: 2026-07-07category: AI 开发工具tags: [Claude Code, BS架构, 入门, Vue, Web开发]初识 Claude Code用自然语言打造第一个 BS 架构 Web 页面从零开始只用自然语言对话让 Claude 帮你搭建一个完整的 BS 架构前端页面。不需要手写一行 HTML你只需要说清楚要什么。一、什么是 Claude CodeClaude Code 是 Anthropic 推出的官方命令行 AI 编程助手。它不是简单的代码补全工具而是一个能够理解整个代码库——读取文件、理解结构、把握上下文执行多步操作——创建文件、修改代码、运行命令、构建项目自主调试——遇到错误时自己读日志、找原因、修代码它跑在你的终端里通过claude命令启动背后连着 Claude Opus/Sonnet 等大模型。你只需要用自然语言描述需求它就能帮你完成从文件创建到项目运行的全过程。二、环境准备2.1 安装 Claude Codenpminstall-ganthropic-ai/claude-code安装完成后在任何项目目录下输入claude即可启动。2.2 初始化一个前端项目启动 Claude Code 后第一条指令可以是帮我用 Vite Vue 3 TypeScript 初始化一个前端项目使用 pnpm 管理依赖Claude 会自动执行以下步骤运行pnpm create vite my-app --template vue-ts进入目录执行pnpm install安装 Element Plus 和 Axiospnpm add element-plus axios创建基本的目录结构2.3 配置项目规范Claude Code 有一个强大的特性CLAUDE.md。在每个项目根目录放一个这个文件Claude 就会在项目上下文中理解你的规范。# CLAUDE.md ## 项目概述 BS 架构管理系统前端使用 Vue 3 TypeScript Vite Element Plus ## 技术栈 - 框架Vue 3 Composition API (script setup) - 构建Vite - UI 库Element Plus - HTTPAxios - 状态管理Pinia - 路由Vue Router ## 编码约定 - 使用 script setup langts 语法 - 组件文件名使用 kebab-case如 user-list.vue - 所有 API 请求统一通过 /utils/http.ts 封装 - 类型定义放在 /types/ 目录下有了这份说明书Claude 每次生成的代码都会保持一致的风格就像团队里有位永远耐心的资深开发在 Code Review。三、用自然语言搭建页面布局3.1 搭建基础布局现在对项目说创建一个侧边栏 主内容区的布局组件。 侧边栏宽度 200px深色背景 #304156包含 Logo 和导航菜单。 主内容区背景色 #f0f2f5使用 el-menu 组件实现路由导航。Claude 会生成类似这样的代码!-- src/layouts/BasicLayout.vue -- template el-container classlayout-container !-- 侧边栏 -- el-aside width200px div classlogo管理系统/div el-menu :default-activeactiveMenu router background-color#304156 text-color#bfcbd9 active-text-color#409EFF el-menu-item index/dashboard el-iconHouse //el-icon span首页/span /el-menu-item el-menu-item index/users el-iconUser //el-icon span用户管理/span /el-menu-item /el-menu /el-aside !-- 主内容区 -- el-main classmain-content router-view / /el-main /el-container /template script setup langts import { computed } from vue import { useRoute } from vue-router import { House, User } from element-plus/icons-vue const route useRoute() const activeMenu computed(() route.path) /script3.2 配置路由继续对话配置路由首页是 /dashboard用户管理是 /users需要懒加载Claude 会创建src/router/index.tsimport{createRouter,createWebHistory}fromvue-routerconstroutes[{path:/,component:()import(/layouts/BasicLayout.vue),children:[{path:dashboard,name:Dashboard,component:()import(/views/Dashboard/index.vue),meta:{title:首页},},{path:users,name:Users,component:()import(/views/Users/index.vue),meta:{title:用户管理},},],},]constroutercreateRouter({history:createWebHistory(),routes,})exportdefaultrouter3.3 编写第一个页面组件在 views/users 下创建一个用户列表页面包含 - 顶部搜索栏用户名搜索 新增按钮 - 中间是 el-table 展示用户数据姓名、邮箱、角色、状态、操作列 - 底部是分页组件 - 点击编辑弹出 el-dialog 表单Claude 会一次性生成完整的页面组件包含搜索、表格、分页、弹窗表单四个部分。四、封装 HTTP 请求BS 架构的前端离不开 API 调用。让 Claude 帮你搭建统一的请求层创建一个 Axios 封装要求 - 统一 baseURL 为 /api - 请求超时 15 秒 - 响应拦截器code200 时返回 data否则弹错误提示 - 请求拦截器自动带上 Token从 localStorage 读取 - 401 自动跳转登录页 - 导出 get/post/put/delete 快捷方法生成的src/utils/http.tsimportaxiosfromaxiosimporttype{AxiosInstance,AxiosRequestConfig}fromaxiosimport{ElMessage}fromelement-plusimportrouterfrom/routerconstservice:AxiosInstanceaxios.create({baseURL:/api,timeout:15000,})// 请求拦截器service.interceptors.request.use((config){consttokenlocalStorage.getItem(token)if(token){config.headers.AuthorizationBearer${token}}returnconfig},(error)Promise.reject(error))// 响应拦截器service.interceptors.response.use((response){const{code,data,message}response.dataif(code200||code0)returndata ElMessage.error(message||请求失败)returnPromise.reject(newError(message))},(error){conststatuserror.response?.statusif(status401){router.push(/login)localStorage.removeItem(token)}elseif(status403){ElMessage.error(拒绝访问)}elseif(status500){ElMessage.error(服务器错误)}else{ElMessage.error(error.message||网络异常)}returnPromise.reject(error)})// 快捷方法exportconstgetTany(url:string,config?:AxiosRequestConfig)service.get(url,config)asPromiseTexportconstpostTany(url:string,data?:any,config?:AxiosRequestConfig)service.post(url,data,config)asPromiseTexportconstputTany(url:string,data?:any,config?:AxiosRequestConfig)service.put(url,data,config)asPromiseTexportconstdelTany(url:string,config?:AxiosRequestConfig)service.delete(url,config)asPromiseTexportdefaultservice关键点整个过程你没有手写任何一行代码只需要把需求说清楚。Claude 理解你的意图然后生成符合工程规范的代码。五、定义 TypeScript 类型类型是大型项目的生命线。让 Claude 帮你建立类型体系定义项目中会用到的通用类型 - ApiResponseT标准 API 响应 { code, message, data } - PageQuery分页查询参数 { pageNum, pageSize } - PageResultT分页结果 { list: T[], total } - User用户对象 { id, username, email, role, status, createTime }Claude 会生成src/types/index.tsexportinterfaceApiResponseTany{code:numbermessage:stringdata:T}exportinterfacePageQuery{pageNum:numberpageSize:number}exportinterfacePageResultTany{list:T[]total:number}exportinterfaceUser{id:numberusername:stringemail:stringrole:admin|editor|viewerstatus:active|inactivecreateTime:string}有了这些类型后面所有组件的 ref、reactive、API 返回值都有完整的类型推导IDE 自动补全一步到位。六、运行和调试帮我启动开发服务器然后在浏览器预览Claude 会执行pnpm dev告诉你http://localhost:5173可以访问。如果启动报错它会读取错误信息、分析问题、自动修复——你甚至不需要知道 TypeScript 编译错误的含义。七、这一章的核心心得自然语言就是编程语言——你不需要背 Vue 的 API只需要说清楚要什么效果CLAUDE.md 是项目的宪法——写好它Claude 生成的代码就像出自同一个资深开发之手类型先行——让 Claude 先建类型体系后续所有组件都有完整的类型推导统一封装——HTTP、路由、状态管理这些基础设施交给 Claude 一次搭好后面专注业务八、下一步第一篇我们完成了前端页面的骨架搭建——布局、路由、HTTP 封装、类型定义。但这只是一个空壳真正的价值在于前后端联调和业务逻辑实现。下一篇我们将学习如何让 Claude 帮你编写完整的业务页面包括表单验证、数据联动、弹窗交互等高级用法让你的 BS 架构应用真正动起来。系列目录初识 Claude Code用自然语言打造第一个 Web 页面 ← 本篇页面级交互表单、弹窗、数据联动待写前后端联调让 Claude 帮你打通 REST API待写状态管理Pinia 与复杂业务逻辑待写深入 Claude CodeAgent 多智能体协作待写Claude 驱动的后端开发Spring Boot 数据库待写工程化进阶代码审查、调试与性能优化待写高级玩法工作流编排与团队协作待写