企业官网建设流程全解析

title: 初识 Claude Code：用自然语言打造第一个 BS 架构 Web 页面
date: 2026-07-07
category: AI 开发工具
tags: [Claude Code, BS架构, 入门, Vue, Web开发]

初识 Claude Code：用自然语言打造第一个 BS 架构 Web 页面

从零开始，只用自然语言对话，让 Claude 帮你搭建一个完整的 BS 架构前端页面。不需要手写一行 HTML，你只需要说清楚"要什么"。

一、什么是 Claude Code？

Claude Code 是 Anthropic 推出的官方命令行 AI 编程助手。它不是简单的代码补全工具，而是一个能够：

• 理解整个代码库——读取文件、理解结构、把握上下文
• 执行多步操作——创建文件、修改代码、运行命令、构建项目
• 自主调试——遇到错误时自己读日志、找原因、修代码

它跑在你的终端里，通过claude命令启动，背后连着 Claude Opus/Sonnet 等大模型。你只需要用自然语言描述需求，它就能帮你完成从文件创建到项目运行的全过程。

二、环境准备

2.1 安装 Claude Code

npminstall-g@anthropic-ai/claude-code

安装完成后，在任何项目目录下输入claude即可启动。

2.2 初始化一个前端项目

启动 Claude Code 后，第一条指令可以是：

帮我用 Vite + Vue 3 + TypeScript 初始化一个前端项目，使用 pnpm 管理依赖

Claude 会自动执行以下步骤：

1. 运行pnpm create vite my-app --template vue-ts
2. 进入目录执行pnpm install
3. 安装 Element Plus 和 Axios：pnpm add element-plus axios
4. 创建基本的目录结构

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 - HTTP：Axios - 状态管理：Pinia - 路由：Vue Router ## 编码约定 - 使用 `<script setup lang="ts">` 语法 - 组件文件名使用 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 class="layout-container"> <!-- 侧边栏 --> <el-aside width="200px"> <div class="logo">管理系统</div> <el-menu :default-active="activeMenu" router background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" > <el-menu-item index="/dashboard"> <el-icon><House /></el-icon> <span>首页</span> </el-menu-item> <el-menu-item index="/users"> <el-icon><User /></el-icon> <span>用户管理</span> </el-menu-item> </el-menu> </el-aside> <!-- 主内容区 --> <el-main class="main-content"> <router-view /> </el-main> </el-container> </template> <script setup lang="ts"> 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) </script>

3.2 配置路由

继续对话：

配置路由，首页是 /dashboard，用户管理是 /users，需要懒加载

Claude 会创建src/router/index.ts：

import{createRouter,createWebHistory}from'vue-router'constroutes=[{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:'用户管理'},},],},]constrouter=createRouter({history:createWebHistory(),routes,})exportdefaultrouter

3.3 编写第一个页面组件

在 views/users 下创建一个用户列表页面，包含： - 顶部搜索栏（用户名搜索 + 新增按钮） - 中间是 el-table 展示用户数据（姓名、邮箱、角色、状态、操作列） - 底部是分页组件 - 点击编辑弹出 el-dialog 表单

Claude 会一次性生成完整的页面组件，包含搜索、表格、分页、弹窗表单四个部分。

四、封装 HTTP 请求

BS 架构的前端离不开 API 调用。让 Claude 帮你搭建统一的请求层：

创建一个 Axios 封装，要求： - 统一 baseURL 为 /api - 请求超时 15 秒 - 响应拦截器：code=200 时返回 data，否则弹错误提示 - 请求拦截器：自动带上 Token（从 localStorage 读取） - 401 自动跳转登录页 - 导出 get/post/put/delete 快捷方法

生成的src/utils/http.ts：

importaxiosfrom'axios'importtype{AxiosInstance,AxiosRequestConfig}from'axios'import{ElMessage}from'element-plus'importrouterfrom'@/router'constservice:AxiosInstance=axios.create({baseURL:'/api',timeout:15000,})// 请求拦截器service.interceptors.request.use((config)=>{consttoken=localStorage.getItem('token')if(token){config.headers.Authorization=`Bearer${token}`}returnconfig},(error)=>Promise.reject(error))// 响应拦截器service.interceptors.response.use((response)=>{const{code,data,message}=response.dataif(code===200||code===0)returndata ElMessage.error(message||'请求失败')returnPromise.reject(newError(message))},(error)=>{conststatus=error.response?.statusif(status===401){router.push('/login')localStorage.removeItem('token')}elseif(status===403){ElMessage.error('拒绝访问')}elseif(status===500){ElMessage.error('服务器错误')}else{ElMessage.error(error.message||'网络异常')}returnPromise.reject(error)})// 快捷方法exportconstget=<T=any>(url:string,config?:AxiosRequestConfig)=>service.get(url,config)asPromise<T>exportconstpost=<T=any>(url:string,data?:any,config?:AxiosRequestConfig)=>service.post(url,data,config)asPromise<T>exportconstput=<T=any>(url:string,data?:any,config?:AxiosRequestConfig)=>service.put(url,data,config)asPromise<T>exportconstdel=<T=any>(url:string,config?:AxiosRequestConfig)=>service.delete(url,config)asPromise<T>exportdefaultservice

关键点：整个过程你没有手写任何一行代码，只需要把需求说清楚。Claude 理解你的意图，然后生成符合工程规范的代码。

五、定义 TypeScript 类型

类型是大型项目的生命线。让 Claude 帮你建立类型体系：

定义项目中会用到的通用类型： - ApiResponse<T>：标准 API 响应 { code, message, data } - PageQuery：分页查询参数 { pageNum, pageSize } - PageResult<T>：分页结果 { list: T[], total } - User：用户对象 { id, username, email, role, status, createTime }

Claude 会生成src/types/index.ts：

exportinterfaceApiResponse<T=any>{code:numbermessage:stringdata:T}exportinterfacePageQuery{pageNum:numberpageSize:number}exportinterfacePageResult<T=any>{list:T[]total:number}exportinterfaceUser{id:numberusername:stringemail:stringrole:'admin'|'editor'|'viewer'status:'active'|'inactive'createTime:string}

有了这些类型，后面所有组件的 ref、reactive、API 返回值都有完整的类型推导，IDE 自动补全一步到位。

六、运行和调试

帮我启动开发服务器，然后在浏览器预览

Claude 会执行pnpm dev，告诉你http://localhost:5173可以访问。如果启动报错，它会读取错误信息、分析问题、自动修复——你甚至不需要知道 TypeScript 编译错误的含义。

七、这一章的核心心得

1. 自然语言就是编程语言——你不需要背 Vue 的 API，只需要说清楚"要什么效果"
2. CLAUDE.md 是项目的"宪法"——写好它，Claude 生成的代码就像出自同一个资深开发之手
3. 类型先行——让 Claude 先建类型体系，后续所有组件都有完整的类型推导
4. 统一封装——HTTP、路由、状态管理这些基础设施交给 Claude 一次搭好，后面专注业务

八、下一步

第一篇我们完成了前端页面的"骨架搭建"——布局、路由、HTTP 封装、类型定义。但这只是一个空壳，真正的价值在于前后端联调和业务逻辑实现。

下一篇我们将学习如何让 Claude 帮你编写完整的业务页面，包括表单验证、数据联动、弹窗交互等高级用法，让你的 BS 架构应用真正"动起来"。

系列目录：

1. 初识 Claude Code：用自然语言打造第一个 Web 页面 ← 本篇
2. 页面级交互：表单、弹窗、数据联动（待写）
3. 前后端联调：让 Claude 帮你打通 REST API（待写）
4. 状态管理：Pinia 与复杂业务逻辑（待写）
5. 深入 Claude Code：Agent 多智能体协作（待写）
6. Claude 驱动的后端开发：Spring Boot + 数据库（待写）
7. 工程化进阶：代码审查、调试与性能优化（待写）
8. 高级玩法：工作流编排与团队协作（待写）