在现代前端开发中，快速、高效地将设计原型转化为实际可运行的代码是开发人员追求的目标。借助 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等方式引用。
- 将顶部的4个统计数据封装到
- 封装查询条件：
- 将所有的查询条件封装到
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 的高效辅助工具不仅能够帮助解决技术问题，还能快速生成可用的代码片段，是开发人员的必备利器。
![Cadence高速板设计技巧（全志H3）[三]](https://i-blog.csdnimg.cn/direct/5aedfdaa2a6b4324b549b49cbb36c55f.png)
