AI 概述

概述

AI 已融入工作和生活，特别对于互联网、软件行业

2023 年 ChatGPT 火爆全球（各大公司都在部署 AI 研发和应用，如国外的微软、谷歌，国内的百度、阿里）
未来 AI 将会大量代替人工，不会用 AI 的人将会慢慢被淘汰（历史发展规律，高效低成本，就像汽车替代马车）
现在正是 AI 发展期、红利期，及早“上车”

AI 很强大，但它没有那么神奇。记住，AI 就是一个工具，它需要主人，需要你！

AI 对于开发人员的核心价值

网上会看到很多 AI 的应用介绍或者教程

使用 AI 聊天，咨询问题 —— 代替搜索引擎
使用 AI 写各种的电商文案（淘宝、小红书）
使用 AI 做一个聊天机器人 —— 这最多算猎奇、业余爱好、或者搞个套壳产品来收费

AI 对于开发人员的最大价值就是 —— 开发提效

使用 AI 快速生成代码
使用 AI 快速解决 bug
使用 AI 让你一个人顶三个人的工作效率 —— 这才是老板所期望的，同时也是你的竞争力

未来可能让你失业的不是 AI ，而是你身边懂 AI 的同事

AI 工具

ChatGPT 和 NewBing
Copilot 和 Cursor
NotionAI
Midjourney 和 Stable-Diffusion
一帧秒创和腾讯智影

AI 不是新事物

同理，汽车也不是一朝产生的，它也需要工业革命 200 年的积累。

AI 是一个很广泛的概念，例如语音识别、人脸识别、智能驾驶、工厂的智能机器人 —— 很多都实践多年了
AI 从几十年之前就有了理论基础（可拜读吴军博士的《数学之美》
ChatGPT 也是多年之前开始启动，而今厚积薄发

AI 要想真正形成一个产业，也需要一个完整的产业结构。例如能连接 Github CodeSandBox 云服务器等。现在 AI 还在发展初期，会慢慢完善

ChatGPT 介绍

ChatGPT 是 OpenAI 公司开发的一个智能聊天工具，基于 GPT 语言模型，能模拟人类的对话方式。默认只能以文字形式进行交互，理解多种语言，可集成插件

AI 工具早就用于我们的生产和生活，但都在小众或专业领域
ChatGPT 能更广泛的应用于日常工作和生活，特别是互联网相关的（互联网相关的容易被网络传播，如程序员秃头、穿格子衫）
ChatGPT 更接近于人类沟通方式，更能直接表达“图灵测试”

注册

代理地址建议选择欧洲地区（亚洲、美区可能被禁止使用），要能访问 ChatGPT 官网 https://chat.openai.com/
当前正常注册非常麻烦（IP 限制，需要国外手机号等），建议去购买（专号，或公用账号）

如果无法注册或购买，可以使用 “AI 整合网站”

其他，可搜索 chatgpt 免费网站列表

关于 plus 和 GPT4.0

ChatGPT 默认是免费使用的，默认使用 GPT3.5 模型

GPT4.0 付费升级 plus 每月 20 刀

高可用性（并发量高时，优先使用）
相应速度更快
可享受更多功能：如第三方插件、GPT4.0 （但有限制次数，目前是每 3h 使用 25次）

GPT3.5 和 GPT4.0

GPT 全称 Generative Pre-trained Transformer 是一种语言模型
ChatGPT 基于这种语言模型来完成智能对话
4.0 模型参数更多，回答更智能更精准

一般问题用 GPT3.5 回答的也挺好

升级有很多限制（如国内 visa 不可用）
升级以后用 GPT4.0 有时间和次数限制
对标大部分用户的情况（大部分都是不升级，用免费的）

第三方插件

ChatGPT 默认以文字形式输入、输出，表达形式比较单一
通过第三方插件来扩展其他形式，如画图、语音识别、联合其他网站（类似于微信里的公众号、小程序等） https://openai.com/blog/chatgpt-plugins
目前插件较少，且都是国外的，还不便用于开发场景

ChatGPT 实战

写简历

整理大纲：

你是一名 10 年工作经验的前端工程师。熟悉前端 html、css、js ，精通 vue 技术栈，做过多个大型项目。现在要换工作写简历，应该怎么写？先列出简历的大纲，先别写内容

完善专业技能部分：

根据之前的描述，再详细说明“前端技能”部分，按条目写出。可加入计算机基础、算法、数据结构等其他编程内容，这样看起来会更加丰富。写出 8 条

继续补充：不要 angular，加上 echarts

写项目经验：

根据之前的描述，再详细补充“工作经验”和“项目经验”部分。你参与过一个大型项目，是一个后台管理系统，包含很多模块，你负责其中两个模块：营销模块、会员模块。这个项目使用 vue 全家桶开发的。你会如何在简历中写这段工作经验？

总结

ChatGPT 可以整理出简历大纲，内容全面，供你选择
ChatGPT 可出详细的专业技能 —— 哪怕你技术栈比较薄弱
ChatGPT 可以从技术、职责、成就等角度总结工作，很专业

优化简历文案

我的前端简历中，有一段工作经验，我的角色职责就是普通的开发工作，接到需求、开发、改 bug 、上线。请帮我润色一下我的角色职责，让它看起来更正式一些。写 5 条

好的，以下是 5 条润色后的角色职责，可以让你在前端简历中看起来更正式：

负责需求分析和功能设计，制定详细的技术方案，并进行代码开发和单元测试。
与后端工程师紧密合作，确保前端代码与后端接口的无缝衔接。
积极参与代码评审，并根据反馈进行代码优化和改进。
负责线上问题的排查和解决，确保网站的稳定运行。
持续关注前端技术发展趋势，并积极进行技术学习和积累。

这些职责描述更详细地说明了你的工作内容，并使用了更专业的术语，例如“需求分析”、“功能设计”、“技术方案”和“代码评审”。它们还突出了你的团队合作能力、问题解决能力和学习能力。

以下是一些额外的建议：

使用动词开头，例如“负责”、“参与”和“关注”。
使用具体的例子来证明你的能力，例如“负责开发了网站的新首页，提高了页面加载速度 20%”。
量化你的成果，例如“解决了 100 个线上问题，提高了网站的稳定性 99%”。

希望这些润色后的职责描述能帮助你更好地展现你的前端开发经验。

TodoList 项目 - 需求

提问：你是一名资深产品经理，现在要设计一个 todo-list 项目，它有哪些功能需求？分条目列出

当设计一个ToDo-list项目时，有一些功能需求是基本的，包括但不限于：

任务创建和管理：
- 用户可以创建新的任务
- 用户可以编辑任务的标题、描述和截止日期
- 用户可以删除任务
- 用户可以标记任务为已完成或未完成状态
任务分类和标记：
- 用户可以对任务进行分类，如工作、学习、个人等
- 用户可以给任务添加标签，以便更容易地进行筛选和识别
提醒功能：
- 用户可以设置任务的提醒时间，系统会在提醒时间通知用户
- 提醒可以通过邮件、短信或应用内通知等方式进行
优先级设置：
- 用户可以为任务设置优先级，以区分重要性或紧急程度
任务排序和过滤：
- 用户可以按照不同的标准对任务进行排序，如截止日期、优先级等
- 用户可以根据条件对任务进行过滤，如已完成任务、未完成任务等
分享和协作：
- 用户可以将任务分享给其他用户，以便共同完成
- 用户之间可以进行任务的评论和讨论
- 可能包括协作功能，如多人同时编辑任务
云同步和备份：
- 用户的任务数据可以通过云服务同步到多个设备，保证数据的一致性和可访问性
- 系统应具备定期自动备份功能，以防止数据丢失
个性化设置：
- 用户可以自定义界面主题、字体大小等个性化设置
- 用户可以选择不同的布局方式，如列表视图、日历视图等
统计和报告：
- 系统可以生成任务完成情况的统计报告，如每天/每周完成的任务数量、任务完成率等
- 用户可以查看任务完成情况的图表或统计数据，以便分析自己的工作效率
跨平台支持：
- 应用程序应支持多种平台，如Web、iOS、Android等，以便用户在不同设备上使用
安全性和隐私保护：
- 用户的任务数据应该得到良好的加密保护，确保用户隐私不受侵犯
- 应用程序应符合相关的隐私法规和数据保护标准
搜索功能：
- 用户可以通过关键词搜索任务，以快速定位需要的任务

这些功能可以作为ToDo-list项目的基本需求，根据具体情况还可以进一步定制和扩展

TodoList 项目 - 组件设计

第一问，组件拆分：你是一名资深前端工程师，擅闯使用 Vue技术栈。用 Vue 实现一个简单的 todo-list 项目时，应该如何拆分组件，请写出组件的名称和描述

使用 Vue 技术栈实现 Todo-list 项目的组件拆分

以下是我对 Todo-list 项目组件拆分的建议：

1. 整体框架:

App.vue: 作为项目的根组件，负责管理整体布局和状态。
Header.vue: 负责显示应用标题和一些全局操作按钮，例如添加新任务按钮。
Main.vue: 负责显示任务列表和任务详情。
Footer.vue: 负责显示一些统计信息，例如已完成的任务数量和未完成的任务数量。

2. 任务列表:

TodoList.vue: 负责显示所有任务的列表，并提供一些操作按钮，例如删除任务和标记完成。
TodoItem.vue: 负责显示单个任务的信息，并提供一些操作按钮，例如编辑任务和删除任务。

3. 任务详情:

TodoDetail.vue: 负责显示单个任务的详细信息，例如任务描述、截止日期和负责人。
TodoForm.vue: 负责编辑任务信息，并提供保存按钮。

4. 其他组件:

AddTodoForm.vue: 负责添加新任务，并提供保存按钮。
Filter.vue: 负责过滤任务列表，例如只显示未完成的任务。
Search.vue: 负责搜索任务列表，例如根据任务标题搜索。

组件描述:

App.vue: 根组件，管理整体布局和状态。
Header.vue: 显示应用标题和一些全局操作按钮。
Main.vue: 显示任务列表和任务详情。
Footer.vue: 显示一些统计信息。
TodoList.vue: 显示所有任务的列表，并提供一些操作按钮。
TodoItem.vue: 显示单个任务的信息，并提供一些操作按钮。
TodoDetail.vue: 显示单个任务的详细信息。
TodoForm.vue: 负责编辑任务信息，并提供保存按钮。
AddTodoForm.vue: 负责添加新任务，并提供保存按钮。
Filter.vue: 负责过滤任务列表。
Search.vue: 负责搜索任务列表。

组件间关系:

App.vue 包含 Header.vue、Main.vue 和 Footer.vue。
Main.vue 包含 TodoList.vue 和 TodoDetail.vue。
TodoList.vue 包含多个 TodoItem.vue。
TodoDetail.vue 包含 TodoForm.vue。
Header.vue 包含 AddTodoForm.vue 和 Filter.vue。

组件间通信:

可以使用 Vuex 来管理全局状态，例如任务列表和当前选中的任务。
可以使用事件来进行组件间通信，例如 TodoItem.vue 可以触发一个事件来通知 TodoList.vue 删除该任务。

总结:

以上只是我对 Todo-list 项目组件拆分的建议，实际开发中可以根据项目需求进行调整。

希望我的回答能对你有所帮助!

第二问，组件关系：

根据以上你列出的组件，它们之间有什么关系呢？如何组成一个完整的系统呢？能否通过画图或者代码示例来说明？

Vue SFC

<!-- App.vue -->
<template>
  <div>
    <Header />
    <Main />
    <Footer />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Main from './components/Main.vue'
import Footer from './components/Footer.vue'export default {
  components: {
    Header,
    Main,
    Footer
  }
}
</script>

Vue SFC

<!-- Main.vue -->
<template>
  <div>
    <TodoList />
    <TodoDetail v-if="selectedTodo" />
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'
import TodoDetail from './components/TodoDetail.vue'

export default {
  components: {
    TodoList,
    TodoDetail
  },
  data() {
    return {
      selectedTodo: null
    }
  }
}
</script>

Vue SFC

<!-- TodoList.vue -->
<template>
  <ul>
    <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" />
  </ul>
</template>

<script>
import TodoItem from './components/TodoItem.vue'

export default {
  components: {
    TodoItem
  },
  props: {
    todos: Array
  }
}
</script>

第三问，具体细节问题：

基于上述内容，TodoItem 在什么地方？

TodoItem 组件位于 TodoList 组件中，负责显示单个任务的信息，并提供一些操作按钮。在 TodoList.vue 中，我们使用 v-for 指令循环遍历 todos 数组，并为每个任务创建一个 TodoItem 组件。

html

<template>
  <ul>
    <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" />
  </ul>
</template>

每个 TodoItem 组件都会接收一个 todo 对象作为 props，并使用该对象的数据来显示任务信息。

html

<template>
  <li>
    {{ todo.title }}
    <button @click="deleteTodo(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  props: {
    todo: Object
  },
  methods: {
    deleteTodo(id) {
      // 触发事件通知 TodoList 删除该任务
      this.$emit('delete-todo', id)
    }
  }
}
</script>

当用户点击 TodoItem 中的删除按钮时，会触发 deleteTodo 方法，该方法会向 TodoList 组件发送一个名为 delete-todo 的事件，并将任务的 id 作为参数传递。

TodoList 组件接收到该事件后，会根据 id 删除相应的任务。

html

<template>
  <ul>
    <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" @delete-todo="deleteTodo" />
  </ul>
</template>

<script>
  export default {
    // ...
    methods: {
      deleteTodo(id) {
        // 从 todos 数组中删除该任务
        this.todos = this.todos.filter(todo => todo.id !== id)
      }
    }
  }
</script>

TodoItem 组件是 TodoList 组件的一部分，负责显示单个任务的信息并提供一些操作按钮。 TodoItem 组件通过事件与 TodoList 组件进行通信，以实现删除任务等功能。

New Bing 介绍

New Bing 微软产品，结合了 bing 搜索和智能聊天。使用时把 bing 地区设置为美国

都是智能聊天机器人
New bing 背后使用了 GPT4.0 语言模型（但回答效果感觉一般）
微软是 OpenAI 背后的投资方之一

New Bing 对比 ChatGPT

ChatGPT 默认的资料库是 2021 年的，时效性不如 new bing 。例如搜索“2022 世界杯冠军是谁，ChatGPT 不能实时联网，而 new bing 可以
ChatGPT 回答问题会更加丰富，而 new bing 更加简洁。例如提问
- 你是一名产品经理，想要设计一个博客系统，写需求文档。需要考虑哪些需求点？请按条目列出
- 你是一名资深前端工程师，想用 vue3 实现一个 todo-list 项目，你会如何拆分组件？

优先选择 ChatGPT 如有补充可选择 new bing

Github Copilot

https://github.com/features/copilot Github 出品，但 Github 早就被微软收购了

使用 OpenAI Codex 智能、实时生成代码
提高编码效率，更关注业务需求（而不是花时间去查找一些语法、算法、API 等）
目前收费 10 美元/月，但可以免费试用 30 天

Github 对于学生可免费使用，可以百度搜索“github copilot 学生认证”

更加强大的 Copilot X 目前尚未发布 https://github.com/features/preview/copilot-x

安装使用

登录 github ，开始试用 copilot
打开 vscode ，搜索并安装 github copilot
安装完成会自动连接你的 github 账号

安装完成 vscode 右下角会有一个飞行员的 icon

实战

（先创建一个 vue3 代码环境）

例一：写一句注释 // 冒泡排序函数 ，回车即可自动生成代码

删除键 - 不接受
tab 键 - 接受
ctrl + enter - 更多方案

例二：写一句注释 // 为 axios 添加拦截器 ，回车

例三：在 js 写一句注释 // 定义 list ，使用 ref ，item 数据结构 { id, name, done } ，可生成 js 代码在 template 中写注释  即可生成模板

Cursor

一个智能编码工具集成了 OpenAI GPT4 模型 https://www.cursor.so/

还可以同步 vscode 的配置、插件。（右上角“设置”icon）

ctrl + k 输入指令，生成代码，例如：

“使用 useState 生成 list ，item 结构是 { id, name, done }”
“循环 list 并显示 item 信息” （在 JSX 中）
“实现切换 done 属性” （在 JSX 中）

ctrl + l 进入聊天模式，如：

普通技术咨询
解释选中的代码含义
询问当前代码是否需要优化？

Cursor 和 Copilot 对比

Cursor 是单独的编辑器，Copilot 是 vscode 插件
Cursor 可聊天，Copilot 可根据注释生成、补全代码
Cursor 目前免费（也有付费升级）

使用 vscode + Copilot ，但 Cursor 绝对值得推荐使用 —— 让你从 CV 工程师，编程 KL 工程师

Prompt 优化

Prompt 提示词，给 AI 工具输入的指令。全面、精准、简洁的提示词，可以让 AI 更加准确的找到答案。

给 AI 定义角色，例如“你是一名资深前端工程师”
写明你的关键要求，例如“写简历，精通 vue 技术栈”
写明产出内容或格式，例如“先列出大纲，按条目列出”
利用上下文，例如“详细解释上文中 xxx”
从模糊到精确，例如先写简历大纲，再继续写项目经验
举例子，例如“item 格式 {id name done}”

不要过于执念于 prompt 优化。如果 AI 需要大量的 prompt 规则，那它就不是 AI 了

AI 和搜索引擎

AI 是聊天形式，一问一答
AI 能理解上下文，能理解更多输入信息（如输入几百个字的 prompt）
AI 能反向提问（如，问我几个历史问题，考察我对中国历史的了解程度）

总之，AI 是模拟人类的沟通行为（再配合语音识别），而搜索引擎相当于你能快速去图书馆查阅资料，这俩完全不一样

国内 AI 工具

文心一言 https://yiyan.baidu.com/ 类似 ChatGPT

通义千问 https://qianwen.aliyun.com/ 正在试用中

AI 编程工具 https://codegeex.cn/zh-CN/ ，类似 Copilot

国内还有很多其他的 AI 产品（毕竟现在 AI 火爆），但社区讨论都没那么多。ChatGPT 发布以后，国内出现很多 AI 工具，大部分都是套壳的