让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。

相关文章

全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
Python实例题之pygame开发打飞机游戏实例代码

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,：本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
Java中Map.Entry()含义及方法使用代码

Java中Map.Entry()含义及方法使用代码

《Java中Map.Entry()含义及方法使用代码》：本文主要介绍Java中Map.Entry()含义及方法使用的相关资料,Map.Entry是Java中Map的静态内部接口,用于表示键值对,其... 目录前言 Map.Entry作用核心方法常见使用场景1. 遍历 Map 的所有键值对2. 直接修改 Ma
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
深入解析 Java Future 类及代码示例

深入解析 Java Future 类及代码示例

《深入解析JavaFuture类及代码示例》JavaFuture是java.util.concurrent包中用于表示异步计算结果的核心接口,下面给大家介绍JavaFuture类及实例代码,感兴... 目录一、Future 类概述二、核心工作机制代码示例执行流程2. 状态机模型3. 核心方法解析行为总结：三
阅读更多...
python获取cmd环境变量值的实现代码

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》：本文主要介绍在Python中获取命令行（cmd）环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中，总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061
阅读更多...
pandas实现数据concat拼接的示例代码

pandas实现数据concat拼接的示例代码

《pandas实现数据concat拼接的示例代码》pandas.concat用于合并DataFrame或Series,本文主要介绍了pandas实现数据concat拼接的示例代码,具有一定的参考价值,... 目录语法示例：使用pandas.concat合并数据默认的concat：参数axis=0，join=
阅读更多...
C#代码实现解析WTGPS和BD数据

C#代码实现解析WTGPS和BD数据

《C#代码实现解析WTGPS和BD数据》在现代的导航与定位应用中,准确解析GPS和北斗（BD）等卫星定位数据至关重要,本文将使用C#语言实现解析WTGPS和BD数据,需要的可以了解下... 目录一、代码结构概览1. 核心解析方法2. 位置信息解析3. 经纬度转换方法4. 日期和时间戳解析5. 辅助方法二、L
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2