---

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

npm install -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'

const routes = [
  {
    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: '用户管理' },
      },
    ],
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

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：

import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'

const service: AxiosInstance = axios.create({
  baseURL: '/api',
  timeout: 15000,
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => Promise.reject(error)
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const { code, data, message } = response.data
    if (code === 200 || code === 0) return data
    ElMessage.error(message || '请求失败')
    return Promise.reject(new Error(message))
  },
  (error) => {
    const status = error.response?.status
    if (status === 401) {
      router.push('/login')
      localStorage.removeItem('token')
    } else if (status === 403) {
      ElMessage.error('拒绝访问')
    } else if (status === 500) {
      ElMessage.error('服务器错误')
    } else {
      ElMessage.error(error.message || '网络异常')
    }
    return Promise.reject(error)
  }
)

// 快捷方法
export const get = <T = any>(url: string, config?: AxiosRequestConfig) =>
  service.get(url, config) as Promise<T>
export const post = <T = any>(url: string, data?: any, config?: AxiosRequestConfig) =>
  service.post(url, data, config) as Promise<T>
export const put = <T = any>(url: string, data?: any, config?: AxiosRequestConfig) =>
  service.put(url, data, config) as Promise<T>
export const del = <T = any>(url: string, config?: AxiosRequestConfig) =>
  service.delete(url, config) as Promise<T>

export default service

关键点：整个过程你没有手写任何一行代码，只需要把需求说清楚。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：

export interface ApiResponse<T = any> {
  code: number
  message: string
  data: T
}

export interface PageQuery {
  pageNum: number
  pageSize: number
}

export interface PageResult<T = any> {
  list: T[]
  total: number
}

export interface User {
  id: number
  username: string
  email: string
  role: '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. 高级玩法：工作流编排与团队协作（待写）