利用 ChatGPT 快速将界面原型转换为 Vue 代码实现

在现代前端开发中，快速、高效地将设计原型转化为实际可运行的代码是开发人员追求的目标。借助 ChatGPT，这一过程可以显著加速。本文将展示如何通过 ChatGPT 辅助开发，将基于 iView 框架的界面原型在短短 2~3 分钟内转换为 Vue 代码，实现界面的快速搭建。

1 需求原型图：

原型图如下：

原型界面说明：

顶部有 4 个统计数据卡片，分别是总充值、近1个月充值、总企业数量、近1年新增企业数量。
下面是一个查询条件区域，包含供应商选择、企业选择、时间区间选择和搜索按钮。
最后是一个数据表格，展示供应商、企业、余额、累计充值金额等信息。

2 使用gpt提问

直接把需求原型截图上传到gpt,并根据自己的项目所使用的框架，向chatGpt 提问：

提问内容：

请使用前端 vue 实现图片中的界面开发，项目使用的是iview框架，
请使用iview框架中的组件实现

如下图：

3 chatGpt生成代码

1 生成vue代码：

chatGpt首次生成前端vue代码如下：

<template>
  <div class="dashboard">
    <Row :gutter="16">
      <Col span="6">
        <Card>
          <div class="stat">52365.25</div>
          <div class="stat-label">总充值（元）</div>
        </Card>
      </Col>
      <Col span="6">
        <Card>
          <div class="stat">52365.25</div>
          <div class="stat-label">近1个月充值（元）</div>
        </Card>
      </Col>
      <Col span="6">
        <Card>
          <div class="stat">52365.25</div>
          <div class="stat-label">总企业</div>
        </Card>
      </Col>
      <Col span="6">
        <Card>
          <div class="stat">5623</div>
          <div class="stat-label">近1年新增企业</div>
        </Card>
      </Col>
    </Row>

    <Row :gutter="16" class="filter-row">
      <Col span="6">
        <Select v-model="supplier" placeholder="请选择供应商">
          <Option value="1">供应商 1</Option>
          <Option value="2">供应商 2</Option>
        </Select>
      </Col>
      <Col span="6">
        <Select v-model="company" placeholder="请选择企业">
          <Option value="1">企业 1</Option>
          <Option value="2">企业 2</Option>
        </Select>
      </Col>
      <Col span="6">
        <DatePicker type="daterange" v-model="dateRange" placeholder="时间区间"></DatePicker>
      </Col>
      <Col span="6">
        <Button type="primary" @click="search">搜索</Button>
      </Col>
    </Row>

    <Table :columns="columns" :data="tableData"></Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      supplier: '',
      company: '',
      dateRange: [],
      columns: [
        { title: '供应商', key: 'supplier' },
        { title: '企业', key: 'company' },
        { title: '企业钱包（余额）', key: 'wallet' },
        { title: '累计充值金额', key: 'totalRecharge' },
        { title: '最近充值日期', key: 'lastRechargeDate' },
        { title: '创建时间', key: 'creationTime' },
        { title: '操作', key: 'actions', render: () => '<a>流水明细</a> <a>充值</a> <a>退款</a>' }
      ],
      tableData: [] // 表格数据
    };
  },
  methods: {
    search() {
      // 搜索逻辑
    }
  }
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stat {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.stat-label {
  text-align: center;
  color: #999;
}

.filter-row {
  margin-top: 20px;
}

.table-actions a {
  margin-right: 10px;
}
</style>

2 chatGPT优化代码：

从上面的代码看有一些常量，我们需要提示改成变更并简单的对统计与查询都简单封装一个对象，后台只需传这些过来前端即可展示。

提问内容：

优化一下：把第一行的4个 52365.25 提取出来封装一个对象并放在data，
以变量方式展示，第二行查询条件把录入绑定变量部分也封装成一个对象query.xxx

执行后如下图：

优化点解释

封装统计数据：
- 将顶部的4个统计数据封装到 stats 对象中，通过变量 stats.totalRecharge、stats.monthlyRecharge 等方式引用。
封装查询条件：
- 将所有的查询条件封装到 query 对象中，包括 supplier、company 和 dateRange，然后通过 query.xxx 方式进行绑定。
逻辑清晰：
- 这种封装方式可以使代码更具可维护性，方便后续增加或修改统计数据和查询条件。

通过这种优化，代码结构更加清晰，便于管理和扩展。

chatGpt最终生成代码：

<template>
  <Card :bordered="false" dis-hover ref="card">
    <Row :gutter="16">
      <Col span="6">
        <Card>
          <div class="stat">{{ stats.totalRecharge }}</div>
          <div class="stat-label">总充值（元）</div>
        </Card>
      </Col>
      <Col span="6">
        <Card>
          <div class="stat">{{ stats.monthlyRecharge }}</div>
          <div class="stat-label">近1个月充值（元）</div>
        </Card>
      </Col>
      <Col span="6">
        <Card>
          <div class="stat">{{ stats.totalCompanies }}</div>
          <div class="stat-label">总企业</div>
        </Card>
      </Col>
      <Col span="6">
        <Card>
          <div class="stat">{{ stats.newCompaniesYear }}</div>
          <div class="stat-label">近1年新增企业</div>
        </Card>
      </Col>
    </Row>

  </Card>
  <br/>

  <Card :bordered="false" dis-hover ref="card">

    <Row :gutter="16" class="filter-row">
      <Col span="6">
        <Select v-model="query.supplier" placeholder="请选择供应商">
          <Option value="1">供应商 1</Option>
          <Option value="2">供应商 2</Option>
        </Select>
      </Col>
      <Col span="6">
        <Select v-model="query.company" placeholder="请选择企业">
          <Option value="1">企业 1</Option>
          <Option value="2">企业 2</Option>
        </Select>
      </Col>
      <Col span="6">
        <DatePicker type="daterange" v-model="query.dateRange" placeholder="时间区间"></DatePicker>
      </Col>
      <Col span="6">
        <Button type="primary" @click="search">搜索</Button>
      </Col>
    </Row>
  </Card>
  <br/>

  <Card :bordered="false" dis-hover ref="card">
    <Table :columns="columns" :data="tableData"></Table>
  </Card>

</template>

<script>
  export default {
    data() {
      return {
        // 封装的统计数据对象
        stats: {
          totalRecharge: 52365.25,
          monthlyRecharge: 52365.25,
          totalCompanies: 52365.25,
          newCompaniesYear: 5623,
        },
        // 封装的查询条件对象
        query: {
          supplier: '',
          company: '',
          dateRange: []
        },
        columns: [
          { title: '供应商', key: 'supplier' },
          { title: '企业', key: 'company' },
          { title: '企业钱包（余额）', key: 'wallet' },
          { title: '累计充值金额', key: 'totalRecharge' },
          { title: '最近充值日期', key: 'lastRechargeDate' },
          { title: '创建时间', key: 'creationTime' },
          {
            title: '操作', key: 'actions',
            render: () => '<a>流水明细</a> <a>充值</a> <a>退款</a>'
          }
        ],
        tableData: [] // 表格数据
      };
    },
    methods: {
      search() {
        // 搜索逻辑
        console.log(this.query);
      }
    }
  };
</script>

<style scoped>
  .dashboard {
    padding: 20px;
    border: red solid 1px;
  }

  .stat {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  }

  .stat-label {
    text-align: center;
    color: #999;
  }

  .filter-row {
    margin-top: 20px;
  }

  .table-actions a {
    margin-right: 10px;
  }
</style>

4 使用代码

把最终把代码复制到我们的项目，最终生成的效果图如下：

5 小结

本次操作大约花了 2~3 分钟时间，通过 ChatGPT 可以快速将原型界面转换成 Vue 代码实现，使用 iView 框架的组件完成了前端布局和功能展示。这种方式极大地提高了开发效率，省时省力，让开发人员能够更专注于业务逻辑和功能实现。ChatGPT 的高效辅助工具不仅能够帮助解决技术问题，还能快速生成可用的代码片段，是开发人员的必备利器。