让GPT替我写vue3代码，看的我血压升高

2023-10-31 04:12
文章标签 javascript 代码 vue vue3 frontend gpt 血压 升高

本文主要是介绍让GPT替我写vue3代码，看的我血压升高，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

事情是这样子的，最近在写Vue3相关的代码，就想着能不能让GPT辅助我写代码，于是，我就先写了一个中文的prompt

Prompt1: 使用vue3写一个用户登录的页面

分割线内部是GPT的回答：

使用 Vue 3 来创建一个用户登录页面需要涉及到多个方面，比如 Vue 组件、数据绑定、事件处理等。下面我会给出一个简单的例子来展示如何实现这个功能。

首先，你需要确保你已经安装了 Vue CLI，如果没有，请参照 Vue 官方文档 进行安装。

  1. 创建一个新的 Vue 项目:
vue create login-project

选择默认设置或按需配置，然后进入项目目录：

cd login-project
  1. 创建登录组件 (Login.vue):
    在 src/components 目录下创建一个新的文件，命名为 Login.vue。
<template><div><h2>Login</h2><form @submit.prevent="handleLogin"><div><label for="username">Username:</label><input v-model="username" id="username" type="text" required /></div><div><label for="password">Password:</label><input v-model="password" id="password" type="password" required /></div><button type="submit">Login</button></form></div>
</template><script>
export default {data() {return {username: '',password: ''};},methods: {handleLogin() {if (this.username && this.password) {// 这里可以发送请求到服务器进行验证console.log("Username:", this.username);console.log("Password:", this.password);}}}
};
</script><style scoped>
/* 可以添加一些简单的样式 */
</style>
  1. 在主组件中使用登录组件:
    打开 src/App.vue 并引入刚刚创建的登录组件。
<template><div id="app"><Login /></div>
</template><script>
import Login from './components/Login.vue';export default {components: {Login}
};
</script>
  1. 运行项目:
    在命令行中输入以下命令运行项目：
npm run serve

现在你应该可以在浏览器中看到登录页面，并尝试输入用户名和密码。

请注意，这只是一个基础的登录页面实现，实际应用中，你可能还需要添加错误处理、表单验证、与后端服务器的交互等功能。

这个回答最大的问题是它的script部分与我预期不同，我希望是如下的风格形式，

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script><template><button @click="count++">Count is: {{ count }}</button>
</template><style scoped>
button {font-weight: bold;
}
</style>

因此，我就问GPT上述代码是什么风格。

GPT的的回答如下：

你给出的代码使用的是 Vue 3 的 Composition API 与 <script setup> 的组合。这是 Vue 3 引入的一种更加简洁、声明式的方式来使用 Composition API。

来简单解释一下这段代码：

  1. <script setup>: 这是一个特殊的 <script> 标签，表示你将在其中使用 Composition API 的 setup() 函数特性。通过 <script setup>，你可以直接在组件顶级范围中声明响应性引用、计算属性、函数等，而不需要显式定义 setup() 函数。

  2. import { ref } from 'vue': 这从 Vue 导入了 ref 函数，它用于创建一个响应性引用。

  3. const count = ref(0): 这创建了一个响应性引用 count，并初始化其值为 0。使用 Composition API，你通常会使用 ref 或 reactive 来创建响应性数据。

  4. <template>: 这部分定义了组件的模板。当按钮被点击时，count 的值会增加，点击事件是通过 @click="count++" 实现的。同时，按钮上显示的文字也会随着 count 的变化而实时更新。

  5. <style scoped>: 这里定义了组件的样式，并使用了 scoped 属性，这意味着这些样式只会应用于当前组件，不会影响到其他组件。

总的来说，你展示的代码风格是 Vue 3 的 Composition API 配合 <script setup> 语法糖使用的风格。这种风格为 Vue 组件提供了更加简洁和灵活的方式来组织和管理响应性逻辑。

于是我改进了我的prompt，

Prompt2: 请使用Vue 3 的 Composition API 与 <script setup> 的组合，编写用户登录的组件

GPT的回答如下

当然可以。以下是使用 Vue 3 的 Composition API 和 <script setup> 来创建用户登录组件的示例代码：

<template><div><h2>Login</h2><form @submit.prevent="handleLogin"><div><label for="username">Username:</label><input v-model="username" id="username" type="text" required /></div><div><label for="password">Password:</label><input v-model="password" id="password" type="password" required /></div><button type="submit">Login</button></form></div>
</template><script setup>
import { ref } from 'vue';const username = ref('');
const password = ref('');const handleLogin = () => {if (username.value && password.value) {// 这里可以发送请求到服务器进行验证console.log("Username:", username.value);console.log("Password:", password.value);}
};
</script><style scoped>
/* 你可以按需添加一些简单的样式 */
</style>

这里有几点需要注意：

  1. 使用了 <script setup>，所以我们可以直接在组件的顶层范围声明变量、函数等。
  2. 当使用 ref 在模板中绑定时，不需要 .value。但在 JavaScript 代码中引用 ref 值时需要使用 .value。
  3. 在 handleLogin 函数中，使用了 .value 来访问 username 和 password 的值。

此示例为基础版本，真实的登录流程应包含错误处理、表单验证、与服务器的交互等。

但是问题来了，我希望的顺序是 script, template, style，因此我又改进了我的Prompt

Promp3: 请使用Vue 3 的 Composition API 与 <script setup> 的组合，编写用户登录的组件, 请按照script, template, style的顺序

如下是GPT的回答，还没等他回答结束，我就发现不对劲了，它的顺序不对啊！

经过一波修改，我得到了如下的Prompt，并且表现还不错，5次中有四次按照我的要求来，但是依旧有一次不按照我的要求来。

Create a Vue 3 Single File Component (SFC) for "user login". only code, no explain, Structure it as follows:<script setup lang="ts">
...
</script><template>
...
</template><style lang="sass">
...
</style>

我很难受，就去群里去吐槽，然后群里的朋友给了提高输出质量的3个技巧

1：定义角色，比如指定它是高级前端开发人员；
2：明确你的要求，越详细越好，可以正向描述，也可以反向要求，比如让他不要输出什么；
3：提供1-2两个示例输出。

按照这个技巧，我写了新的Prompt，如下

Create a Vue 3 Single File Component (SFC) for "user login". The first section  is  <script setup lang="ts"> </script>,  followed by the  <template> </template> section , and finally, the  <style lang="sass"> </style> section.  for example```vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script><template><button @click="count++">Count is: {{ count }}</button>
</template><style scoped>
button {font-weight: bold;
}
</style>
\```

新的Prompt，我先说明我要求的顺序，然后给了一个案例，在4.0中测试良好，几乎没出错。但是在3.5中，就没对过。

感想：我终于明白了什么叫做“语言模型，每次都是输出他认为概率最大的一个”。因为template的顺序是vue2时代的主流，显然互联网上占据主导的代码都是template的风格，因此GPT3.5的偏见太深了，几乎不可能被纠正。

当然，如果使用的是API，还是有可能纠正的，

import os
import openai
openai.api_key = "API KEY"completion = openai.ChatCompletion.create(model="gpt-3.5-turbo",messages=[{"role": "system", "content": """You are a professional front-end developer, please help uesrto create a Vue 3 Single File Component (SFC) Component 
The first section  is  <script setup lang="ts"> </script>,  followed by the  <template> </template> section , and finally, the  <style lang="sass"> </style> section.
"""},{"role": "user", "content": "help me create counter component!"},{"role": "assistant", "content":"""```vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script><template><button @click="count++">Count is: {{ count }}</button>
</template><style scoped>
button {font-weight: bold;
}
</style>
```"""},{"role": "user", "content": "help me write a user login component"},{"role": "assistant", "content": "```vue\n<template>\n  <div class=\"login-container\">\n ```"},{"role": "user", "content": "you are in wrong order"}]
)print(completion.choices[0].message["content"])

如下是GPT的输出内容，他会直接开始道歉，然后按照正确的顺序给你来。

Apologies for the confusion. Here’s the correct order for creating a user login component:

<script setup lang="ts">
import { ref } from 'vue'const username = ref('')
const password = ref('')
const loggedIn = ref(false)const login = () => {// Add your login logic hereif (username.value === 'admin' && password.value === 'password') {loggedIn.value = true} else {loggedIn.value = false// Show error message or perform any other login failed actionconsole.log('Login failed')}
}const logout = () => {// Add your logout logic hereloggedIn.value = falseusername.value = ''password.value = ''
}
</script><template><div class="login-container"><h2>Login</h2><form @submit.prevent="login"><label for="username">Username</label><input v-model="username" type="text" id="username" required><label for="password">Password</label><input v-model="password" type="password" id="password" required><button type="submit">Login</button></form><div v-if="loggedIn"><h3>Welcome, {{ username }}</h3><button @click="logout">Logout</button></div></div>
</template><style lang="sass" scoped>
/* Add your custom styles here */.login-container {max-width: 400px;margin: 0 auto;
}form {display: grid;gap: 1rem;
}label {font-weight: bold;
}button {background-color: #007bff;color: #fff;padding: 0.5rem 1rem;border: none;cursor: pointer;
}</style>

这篇关于让GPT替我写vue3代码，看的我血压升高的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/312743。

相关文章

C++使用栈实现括号匹配的代码详解

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中，括号匹配是一个常见问题，尤其是在
阅读更多...
部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
Java调用DeepSeek API的最佳实践及详细代码示例

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》：本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.
阅读更多...
使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置（可选）启动服务应用场景
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
Python中顺序结构和循环结构示例代码

Python中顺序结构和循环结构示例代码

《Python中顺序结构和循环结构示例代码》：本文主要介绍Python中的条件语句和循环语句,条件语句用于根据条件执行不同的代码块,循环语句用于重复执行一段代码,文章还详细说明了range函数的使... 目录一、条件语句（1）条件语句的定义（2）条件语句的语法（a）单分支 if（b）双分支 if-else（
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
MySQL数据库函数之JSON_EXTRACT示例代码

MySQL数据库函数之JSON_EXTRACT示例代码

《MySQL数据库函数之JSON_EXTRACT示例代码》：本文主要介绍MySQL数据库函数之JSON_EXTRACT的相关资料,JSON_EXTRACT()函数用于从JSON文档中提取值,支持对... 目录前言基本语法路径表达式示例示例 1: 提取简单值示例 2: 提取嵌套值示例 3: 提取数组中的值注意
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2