赞
踩
在正式开始搭建项目之前,我们需要先对 本地的开发环境进行搭建。一个良好的开发环境可以提供稳定的基础设施和工具,帮助我们高效地进行项目开发和调试。特别是在现代前端开发中,为了满足不断变化的需求,使用合适的工具和框架进行开发是至关重要的。我们将使用以下工具和框架:
我们可以访问 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 命令来验证是否安装成功
通过以上步骤,我们成功地搭建了本地开发环境,安装了 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 常用命令,这些命令将帮助我们开始项目版本管理:
GitHub 是一个 基于 Git 的代码托管平台,它提供了代码存储、协作和版本控制功能。通过创建一个 GitHub 账号,我们可以将本地 Git 仓库与远程 GitHub 仓库关联起来,实现团队间的协作和代码共享。
那么我们该如何为 ChatBot 项目创建一个 GitHub 远程仓库并与本地仓库进行关联呢?
###创建 GitHub 远程仓库
要将项目与 GitHub 关联,我们需要在 GitHub 上创建一个新的远程仓库。
首先,前往 GitHub 进行登录,并点击页面中的 “Create repository” 按钮或是右上角的 “New Repository” 按钮。
其次,输入仓库的名称和描述,并选择是否将其设置为公开或私有。
最后点击 “Create repository” 按钮就可以创建一个新的远程仓库了。
由于我们创建的是一个 空的远程仓库,创建之后会出现以下包含关联本地仓库步骤的页面。
那么我们就按照它所提供的步骤来进行与本地仓库的关联。
本地仓库关联
我们在本地 任意位置 新建一个名为 ChatBot 的文件夹,当然你也可以命名为其他名称。然后打开命令行终端,进入该目录。
首先,我们需要将 ChatBot 目录初始化为本地仓库:
git init
为了能够与远程仓库进行关联,我们需要有能够提交的内容。我们可以创建一个 README.md 文件,将它添加至 Git 暂存区并进行提交。
echo "# ChatBot" >> README.md
git add README.md
git commit -m "First commit"
然后,运行以下命令来关联本地仓库与远程仓库,你需要将 替换为刚才所创建远程仓库的链接,如
https://github.com/xxx/ChatBot.git
git remote add origin <repository-url>
完成后,我们需要先将本地仓库的分支切换至主分支 main,再运行以下命令将本地分支推送到远程仓库:
git branch -M main
git push -u origin main
推送成功之后,我们再次访问 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 和 GitHub 的使用到此就结束了!下一小节我们将开始从 GitHub 拉取并搭建后端项目。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。