让GPT替我写vue3代码，看的我血压升高-编程知识

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

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

分割线内部是GPT的回答：

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

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

创建一个新的 Vue 项目:

vue create login-project

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

cd login-project

创建登录组件 (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>

在主组件中使用登录组件:
打开 src/App.vue 并引入刚刚创建的登录组件。

<template><div id="app"><Login /></div>
</template><script>
import Login from './components/Login.vue';export default {components: {Login}
};
</script>

运行项目:
在命令行中输入以下命令运行项目：

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。

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

<script setup>: 这是一个特殊的 <script> 标签，表示你将在其中使用 Composition API 的 setup() 函数特性。通过 <script setup>，你可以直接在组件顶级范围中声明响应性引用、计算属性、函数等，而不需要显式定义 setup() 函数。
import { ref } from 'vue': 这从 Vue 导入了 ref 函数，它用于创建一个响应性引用。
const count = ref(0): 这创建了一个响应性引用 count，并初始化其值为 0。使用 Composition API，你通常会使用 ref 或 reactive 来创建响应性数据。
<template>: 这部分定义了组件的模板。当按钮被点击时，count 的值会增加，点击事件是通过 @click="count++" 实现的。同时，按钮上显示的文字也会随着 count 的变化而实时更新。
<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>

这里有几点需要注意：

使用了 <script setup>，所以我们可以直接在组件的顶层范围声明变量、函数等。
当使用 ref 在模板中绑定时，不需要 .value。但在 JavaScript 代码中引用 ref 值时需要使用 .value。
在 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>