当前位置:   article > 正文

自己的chatgpt---chatbot项目实战_chatgpt-vue

chatgpt-vue

在正式开始搭建项目之前,我们需要先对 本地的开发环境进行搭建。一个良好的开发环境可以提供稳定的基础设施和工具,帮助我们高效地进行项目开发和调试。特别是在现代前端开发中,为了满足不断变化的需求,使用合适的工具和框架进行开发是至关重要的。我们将使用以下工具和框架:

  • Node.js:一个基于 Chrome V8 引擎的 JavaScript 运行时,用于构建可伸缩的网络应用程序
  • Yarn:一个快速、可靠且安全的 软件包管理器,用于管理项目依赖关系
  • Vue.js:一套用于构建用户界面的 渐进式 JavaScript 框架,广泛应用于现代 Web 开发
  • Vite:一个快速、简单且功能强大的 构建工具,用于现代化的 Web 应用程序开发
    接下来,让我们逐步了解如何搭建这些工具和框架,以便能够在本地环境中顺利进行开发。
    安装 Node.js(https://nodejs.org/zh-cn)
    安装教程
    首先,我们需要安装 Node.js。Node.js 提供了一个运行 JavaScript 的环境,使我们能够在服务器端运行 JavaScript 代码。同时,它还提供了 npm(Node 包管理器),用于安装和管理项目的依赖项。

我们可以访问 Node.js 官方网站,选择适合你操作系统的版本进行下载(通常推荐选择 LTS 版本)。

在这里插入图片描述

然后运行安装程序进行安装,过程中只需要按照提示进行配置即可。

安装完成后,打开终端(命令提示符)窗口,我们可以通过运行 node --version 命令验证 Node.js 是否安装成功。如果安装成功,你将看到输出类似于以下内容的 Node.js 版本号:

在这里插入图片描述

Node.js 安装完成后,我们就可以开始安装其他工具和框架了。

安装 Yarn
Yarn 是一个用于管理项目依赖关系的软件包管理器。相比于 npm,Yarn 在速度和安全性方面有着显著的改进,因此在前端开发中被广泛使用。

由于我们目前安装的 Node.js 版本 均大于 16.10,我们需要使用 Corepack 来安装 Yarn。Corepack 默认包含在所有 Node.js 安装中,但目前是选择性的,因此需要启用它。我们打开终端(命令提示符)窗口,运行以下命令:
在这里插入图片描述
然后再通过以下命令来更新全局的 Yarn:
在这里插入图片描述

corepack prepare yarn@stable --activate
这样一来,我们就完成了 Yarn 的安装,同样可以通过 yarn --version 命令来验证是否安装成功
image-20230914141611904.png

通过以上步骤,我们成功地搭建了本地开发环境,安装了 Node.js 和 Yarn。这些工具和框架将为我们提供强大的开发能力,使我们能够高效地构建现代 Web 应用程序。

看到这里,可能会有同学产生疑问了:我们只安装了 Node.js 和 Yarn,那 Vue.js 和 Vite 呢?

其实,我们并不需要对它们进行单独的安装,因为在 Node.js 16 之后,Vue.js 和 Vite 的脚手架工具已经集成到了 Node.js 的安装包中,我们只需要通过执行 yarn create 命令即可实现相同的操作。
前面我们完成了本地开发环境的搭建,在正式开始搭建项目之前,我们还需要了解一下 如何对项目进行版本管理。

在软件开发过程中,项目版本管理起着至关重要的作用。它能够帮助团队协同工作,追踪代码变更,回滚错误修改以及将工作结果整合到一个可靠的代码库中。Git 是目前最流行和广泛使用的分布式版本控制系统,而 GitHub 则是一个基于 Git 的代码托管平台。下面将引导大家了解 Git 和 GitHub,并展示如何使用它们来有效地管理我们的项目版本。

Git 介绍
Git 是一个强大的 分布式版本控制系统,它可以对文件和代码进行跟踪、管理和存储。它有许多优点,例如高效的分支管理、快速的操作速度以及强大的合并功能。Git 被广泛使用于开源项目和商业项目中,它提供了一种简单且灵活的方式来记录和跟踪项目的变化。

Git 安
###Git安装教程
首先,我们需要安装 Git 客户端。根据不同的操作系统,我们可以从 Git 官方网站 下载适合系统的安装程序。

在这里插入图片描述

安装的过程也比较简单,只需要按照安装向导提示进行安装即可完成。

Git 常用命令

我们还需要对一些常用的 Git 命令进行了解。下面列举了一些 Git 常用命令,这些命令将帮助我们开始项目版本管理:

  • git init:在当前目录初始化一个新的 Git 仓库
  • git clone :克隆(下载)一个远程 Git 仓库到本地
  • git add :将文件添加到 Git 的暂存区,准备提交
  • git commit -m “”:提交文件变更,并附带一条简短的描述信息
  • git push:将本地的提交推送到远程代码库
  • git pull:从远程仓库拉取最新的代码更新到本地
  • git branch:列出所有分支
  • git checkout :切换到指定分支
  • git merge :将指定分支的更改合并到当前分支
    这些只是 Git 命令的一小部分,但足以让我们开始使用 Git 进行版本管理。

GitHub 介绍

GitHub 是一个 基于 Git 的代码托管平台,它提供了代码存储、协作和版本控制功能。通过创建一个 GitHub 账号,我们可以将本地 Git 仓库与远程 GitHub 仓库关联起来,实现团队间的协作和代码共享。

那么我们该如何为 ChatBot 项目创建一个 GitHub 远程仓库并与本地仓库进行关联呢?

###创建 GitHub 远程仓库
要将项目与 GitHub 关联,我们需要在 GitHub 上创建一个新的远程仓库。

首先,前往 GitHub 进行登录,并点击页面中的 “Create repository” 按钮或是右上角的 “New Repository” 按钮。

其次,输入仓库的名称和描述,并选择是否将其设置为公开或私有。

在这里插入图片描述

最后点击 “Create repository” 按钮就可以创建一个新的远程仓库了。

由于我们创建的是一个 空的远程仓库,创建之后会出现以下包含关联本地仓库步骤的页面。

在这里插入图片描述

那么我们就按照它所提供的步骤来进行与本地仓库的关联。

本地仓库关联
我们在本地 任意位置 新建一个名为 ChatBot 的文件夹,当然你也可以命名为其他名称。然后打开命令行终端,进入该目录。

首先,我们需要将 ChatBot 目录初始化为本地仓库:

git init
  • 1

为了能够与远程仓库进行关联,我们需要有能够提交的内容。我们可以创建一个 README.md 文件,将它添加至 Git 暂存区并进行提交。

创建README.md文件并输入内容"# ChatBot"

echo "# ChatBot" >> README.md
  • 1

将README.md文件添加至暂存区

git add README.md
  • 1

提交暂存区的更改

git commit -m "First commit"
  • 1

然后,运行以下命令来关联本地仓库与远程仓库,你需要将 替换为刚才所创建远程仓库的链接,如

https://github.com/xxx/ChatBot.git
  • 1
git remote add origin <repository-url>
  • 1

完成后,我们需要先将本地仓库的分支切换至主分支 main,再运行以下命令将本地分支推送到远程仓库:

切换至主分支

git branch -M main
  • 1

将本地主分支的内容推送到远程仓库

git push -u origin main
  • 1

推送成功之后,我们再次访问 GitHub 仓库就能看到刚刚提交的 README.md 文件了。

如果在执行 git push 命令时,出现以下 “Authentication failed” 的错误,是由于 GitHub 不再支持使用 username 和 password 来推送代码。

解决方案如下。我们可以点击右上角的头像,并依次选择 “Settings” -> “Developer Settings” -> “Personal access tokens” -> “Generate new token”,如下图所示。

image-20230915131130166.png

然后我们为需要创建的 Token 命名、选择过期时间并赋予该 Token 权限,因为是自己使用,所以我们可以对所有权限都进行勾选。

在这里插入图片描述

最后点击 “Generate” 按钮即可生成 Token,我们对其进行复制。

在这里插入图片描述

这时候再去重新执行 git push -u origin main 命令,输入完用户名(username)之后,我们使用刚刚复制的 Token 作为密码(password),这样就能成功进行代码的推送了。

在这里插入图片描述

git安装时遇见don’t connect serve 问题解决方案

在这里插入图片描述
在这里插入图片描述

好了,有关于 Git 和 GitHub 的使用到此就结束了!下一小节我们将开始从 GitHub 拉取并搭建后端项目。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/天景科技苑/article/detail/900235
推荐阅读
相关标签
  

闽ICP备14008679号