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

相关文章

SpringCloud集成AlloyDB的示例代码

SpringCloud集成AlloyDB的示例代码

《SpringCloud集成AlloyDB的示例代码》AlloyDB是GoogleCloud提供的一种高度可扩展、强性能的关系型数据库服务,它兼容PostgreSQL,并提供了更快的查询性能... 目录1.AlloyDBjavascript是什么？AlloyDB 的工作原理2.搭建测试环境3.代码工程1.
阅读更多...
Java调用Python代码的几种方法小结

Java调用Python代码的几种方法小结

《Java调用Python代码的几种方法小结》Python语言有丰富的系统管理、数据处理、统计类软件包,因此从java应用中调用Python代码的需求很常见、实用,本文介绍几种方法从java调用Pyt... 目录引言Java core使用ProcessBuilder使用Java脚本引擎总结引言python
阅读更多...
Java中ArrayList的8种浅拷贝方式示例代码

Java中ArrayList的8种浅拷贝方式示例代码

《Java中ArrayList的8种浅拷贝方式示例代码》：本文主要介绍Java中ArrayList的8种浅拷贝方式的相关资料,讲解了Java中ArrayList的浅拷贝概念,并详细分享了八种实现浅... 目录引言什么是浅拷贝？ArrayList 浅拷贝的重要性方法一：使用构造函数方法二：使用 addAll(
阅读更多...
JAVA利用顺序表实现“杨辉三角”的思路及代码示例

JAVA利用顺序表实现“杨辉三角”的思路及代码示例

《JAVA利用顺序表实现“杨辉三角”的思路及代码示例》杨辉三角形是中国古代数学的杰出研究成果之一,是我国北宋数学家贾宪于1050年首先发现并使用的,：本文主要介绍JAVA利用顺序表实现杨辉三角的思... 目录一：“杨辉三角”题目链接二：题解代码：三：题解思路：总结一：“杨辉三角”题目链接题目链接：点击这里
阅读更多...
SpringBoot使用注解集成Redis缓存的示例代码

SpringBoot使用注解集成Redis缓存的示例代码

《SpringBoot使用注解集成Redis缓存的示例代码》：本文主要介绍在SpringBoot中使用注解集成Redis缓存的步骤,包括添加依赖、创建相关配置类、需要缓存数据的类（Tes... 目录一、创建 Caching 配置类二、创建需要缓存数据的类三、测试方法Spring Boot 熟悉后，集成一个外
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
轻松掌握python的dataclass让你的代码更简洁优雅

轻松掌握python的dataclass让你的代码更简洁优雅

《轻松掌握python的dataclass让你的代码更简洁优雅》本文总结了几个我在使用Python的dataclass时常用的技巧,dataclass装饰器可以帮助我们简化数据类的定义过程,包括设置默... 目录1. 传统的类定义方式2. dataclass装饰器定义类2.1. 默认值2.2. 隐藏敏感信息
阅读更多...
opencv实现像素统计的示例代码

opencv实现像素统计的示例代码

《opencv实现像素统计的示例代码》本文介绍了OpenCV中统计图像像素信息的常用方法和函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 统计像素值的基本信息2. 统计像素值的直方图3. 统计像素值的总和4. 统计非零像素的数量
阅读更多...
IDEA常用插件之代码扫描SonarLint详解

IDEA常用插件之代码扫描SonarLint详解

《IDEA常用插件之代码扫描SonarLint详解》SonarLint是一款用于代码扫描的插件,可以帮助查找隐藏的bug,下载并安装插件后,右键点击项目并选择“Analyze”、“Analyzewit... 目录SonajavascriptrLint 查找隐藏的bug下载安装插件扫描代码查看结果总结Sona
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2