八、在 GitHub 页面上部署 Vue CLI 3 应用
在本章中，我们将在一个新的 GitHub 帐户上建立一个新的存储库，并快速创建一个基于 Vue 的项目原型。然后，我们将使用 GitHub 页面部署它。在本章中，我们将了解以下内容：
- GitHub 桌面应用
- Git 的基础知识（它是什么以及如何工作）
- 一些基本的 Git 命令
- 理解 Git 中的分支
- 如何正确设置 Vue 应用以使用 GitHub 页面
到本章结束时，您将在 GitHub 页面上提供一个完全工作的 Vue 应用。让我们从了解如何使用 GitHub 桌面应用开始。
安装 GitHub 桌面应用
首先，导航到以下 URL:https://desktop.github.com。接下来，只需使用屏幕中央突出的下载按钮下载应用，如以下屏幕截图所示：
下载 GitHub 桌面应用安装文件（GithubDesktopSetup.exe后，您需要运行安装
一旦安装，您将得到一个最小的界面。如果您是第一次使用 Git 和 GitHub，那么这个最小的接口可能看起来太小了。此应用中发生了什么？
为了理解这个应用是如何工作的，您需要了解 Git 的一些基本概念。
了解 Git 的工作原理
当您处理一个项目时，如果您没有使用诸如 Git 之类的源代码版本控制，您可能会认为您的项目只有一个文件夹。例如，使用 Vue CLI 3 安装的任何 Vue 应用都将作为一个单独的文件夹结束，其中包含许多子文件夹。
我们可以简化这种 Vue 应用的树结构，并将其描述为：
aVueApp
|- aSubfolder
|- anotherSubfolder
|- yetAnotherSubfolder
请注意，我们想象中的 Vue 应用有一个名为aVueApp的根文件夹。此根文件夹中有三个子文件夹，其中包含 Vue 应用的完整功能。
只要我们只处理少数文件和文件夹，也就是说，只要我们的 Vue 应用非常小，我们就不必担心文件和文件夹的版本控制问题，因为几乎没有什么需要版本控制的。如果我们在文件或文件夹中出错，我们只需撤消更改，然后返回到文件的早期版本。这是一个合理的方法。
然而，如果我们的项目扩展到，比如说，分布在七个文件夹中的 30 个文件，会发生什么？让我们想象一下，在 Vue 项目的开发过程中，这 30 个文件中的每个文件只更新了几行代码。让我们进一步想象一下，我们对这些文件进行了如此多的更改，并且在开发过程中犯了一些重大错误，以至于我们无法继续进行我们的项目。通常，在一个较小的项目中，我们可以简单地撤销对几个文件所做的更改，以返回到我们应用的上一个工作版本。
然而，由于许多更改分布在许多不同的文件中，我们不仅不太可能记住将每个更改撤消回应用的上一个工作版本，而且撤消所有这些更改也将非常耗时，因此最终是不切实际的。
开发人员应该做什么
幸运的是，我们有版本控制。Git 被称为DVCS：一个分布式版本控制系统。在不太技术化的情况下，您可以将 Git 视为一个大的撤销/重做按钮，并附带一点警告。Git 不会撤销单个文件上的更改，而是跟踪开发人员应用的版本，有点像在某个时间点拍摄整个应用的快照。
开发人员负责决定何时应该进行此操作。例如，当您在应用中编写了一个新功能，并且准备将应用保存为当前状态，以便您可以返回应用时，只需通过提交更改来保存即可。
与其从理论上描述这一点，不如启动一个新的 Vue 应用，并在 Git 的帮助下开始跟踪对它所做的更改。
启动新的 Vue 应用并使用 Git 跟踪更改
让我们打开 Git Bash 并在我们选择的文件夹中创建一个新的 Vue 项目，如下所示：
vue create chapter8
让我们保持简单，并在 Vue CLI 3 提示我们回答时按回车键。正如我们已经了解到的，这是一种在安装带有 Vue CLI 3 的新 Vue 应用时接受默认设置的简便快捷的方法。
要开始使用 Git 跟踪项目，请运行以下命令：
git init
此命令初始化新的本地 Git 存储库。我们在这里使用 local 这个词是因为，目前，这个存储库只对我们的计算机是本地的。如果我们明天擦除计算机的磁盘，我们刚刚创建的本地 Git 存储库也将丢失
但是，在某些情况下，Git 存储库已经初始化。下面是一个简单的命令，我们可以运行它来查看项目中是否有 Git 存储库：
git status
前面的命令为我们提供了有关存储库当前状态的信息。如果运行此命令的文件夹不是空的，它将报告当前文件夹不是 Git 存储库。
现在让我们在chapter8文件夹的根目录中运行git status命令。这就是我们得到的回报：
On branch master
nothing to commit, working tree clean
这些信息告诉我们，我们目前处于项目的主分支上，没有什么需要提交的。这棵正在工作的树很干净。这工作树是什么？
工作树表示已保存的所有文件和文件夹，其更改已提交到我们的项目中。
要检查对项目文件所做更改的历史记录，可以运行以下命令：
git log
此命令将列出到目前为止我们添加到项目中的所有提交。以下是前面命令的输出：
commit ee07b4828fb217902f2f7c1047f00f936c3a461f (HEAD -> master)
Author: UserWithEmail <user@email.com>
Date: Mon Apr 22 22:18:48 2019 +0200
init
在这里，我们可以看到几条信息：
- 使用 40 个字符的 SHA 唯一标识符提交
- 提交作者（包括作者的用户名和电子邮件地址）
- 提交的日期和时间
现在让我们对App.vue文件做一个小的更改。我们将把msg属性从 Welcome 更新到您的 Vue.js 应用，使其仅为 Welcome。保存更改后，我们可以再次运行git status命令。这是我们将在控制台中看到的内容：
On branch master
Changes not staged for commit:
(use ''git add <file>...'' to update what will be committed)
(use ''git checkout -- <file>...'' to discard changes in working directory)
modified: src/App.vue
no changes added to commit (use ''git add'' and/or ''git commit -a'')
现在，我们可以创建另一个快照来描述我们的应用此时所处的状态。为此，我们需要做以下两件事：
- 首先，我们需要将所有更改添加到暂存区（这是第二个 Git 树）。
- 其次，我们需要提交这些更改，以便它们获得自己的 commit SHA（由 40 个伪随机字符组成的字符串组成的唯一标识符）。
将更改提交到我们的应用
让我们使用此命令添加所有更改：
git add --all
接下来，我们将通过提供如下提交消息来提交更改：
git commit -m "Update App.vue's template"
现在，让我们再次运行git log命令以查看输出。这一次，我们还将传递一个标志--oneline，如下所示：
git log --oneline
这是我们返回控制台的结果：
e469374 (HEAD -> master) Update App.vue's template
ee07b48 init
注意，这一次，我们得到的信息要简洁得多。40 个字符的 SHA 字符串现在缩写为前 8 个字母和数字，并跳过作者详细信息。--oneline标志在我们有许多承诺需要研究时非常有用。您甚至可以通过传递另一个标志（从减号开始，然后是希望看到的提交数量）来缩小结果数量。无论您指定哪个数字，您都将返回许多最近的提交。
例如，我们当前有两次提交，因此可以运行此命令查看最后两次提交：
git log --oneline -2
我们还可以运行此命令以仅查看最后一次提交：
git log --oneline -1
接下来，我们来看看三棵树的概念。
三树概念
Git 中有三棵树的概念。需要注意的是，这个概念与树数据结构没有任何关系。在这里，树只是一个隐喻，我们使用它来表示文件的特定状态。这三棵树包括：
- 工作目录
- 暂存区（也称为暂存索引）
- 存储库
三棵树的概念一开始听起来可能令人困惑，但实际上非常简单。以下是一个基本的 Git 工作流：
- 我们使用
vue create <appname>安装了一个应用 - 作为安装的一部分，我们的应用被初始化为 Git 存储库。
- 一旦安装完成，我们就有了所有文件（工作目录）和一个提交（带有“init”消息，表示存储库已经初始化）。
- 然后，我们对工作目录进行一些更改。
- 在提交这些更改之前，我们需要将它们添加到我们的阶段索引。暂存索引只是我们正在准备提交的更新文件的树。如果我们没有使用
git add <filename>命令添加任何文件，则我们的暂存索引为空。 - 将所有文件暂存到暂存区域后，就可以提交它们（使用
git commit -m语法，后跟引号内的特定提交消息）。 - 提交更改后，只需重复该过程。
除了工作目录和临时区域之外，第三棵树就是存储库。您可以使用checkout命令进入将存储库的任何部分加载到您的工作目录中。如果你愿意，你可以简单地重复这个过程。
Git 中的分支
Git 中的另一个重要概念是分支。对于科幻迷来说，分支可以被描述为一种多重宇宙：一系列可供选择的现实，例如，你的项目可以在页脚有一个导航栏，或者根本没有导航栏。
当我们想向项目中添加新功能时，我们使用分支。这样，每个分支都代表了我们项目的一个独立特性
每个 Git 项目都从一个分支开始：master
一旦我们决定需要另一个分支来处理我们需要处理的特殊功能，我们只需运行以下命令：
git checkout -b "branch name here"
前面的命令表示：创建一个新分支，调用它branch name here，然后切换到这个新添加的分支。
要查看项目中所有分支的列表，只需运行以下命令：
git branch
此命令将打印出项目中的所有分支，并在当前分支前面添加星号。以下是一个示例输出：
branch one
branch two
* master
前面的输出意味着我们的项目中总共有三个分支，我们目前在master分支上。
合并分支
在 GitHub 中设置项目之前，还有一件事需要提及，那就是合并分支的概念
工作流程如下：我们使用合理的名称（例如，add-navbar）签出一个新分支。接下来，我们向这个分支添加我们想要的所有特性，并提交我们的更改。完成后，我们切换回另一个分支，例如，主控。然后，我们只需运行以下命令：
git merge add-navbar
这样做将导致来自add-navbar分支的所有代码被拉入master分支。我们的master分行和add-navbar分行现在共享相同的代码。
Note that you cannot switch branches if you have changes in your working directory that haven't been committed! If you don't want to commit your changes, but still need to switch to a different branch, a workaround is to use the git stash command.
这就结束了我们对 Git 一些基本概念的快速介绍。然而，这远不是一个完整的介绍。我们只提到了一些我们将在项目中使用的基本特性。还有很多东西要学。
注册新的 GitHub 帐户
我们已经安装了 GitHub 桌面。我们对 Git 也有足够的了解，能够理解本章的其余部分。现在我们将注册一个 GitHub 帐户。
导航至https://github.com 并注册一个新帐户。确保检查您的电子邮件并确认注册。
注册并登录后，您将看到如下界面：
这是我们的远程GitHub 存储库将居住的地方。要添加到远程存储库中，我们需要将更改推送到那里。远程存储库称为源/主。
幸运的是，我们已经安装了 GitHub 桌面，使用它是与 GitHub 交互的最简单方式。您可以轻松地创建新存储库、更新现有存储库、添加分支并推送到远程存储库，所有这些都可以从 GitHub 桌面进行。
我们已经有了chapter8 Vue项目，其中增加了一个提交。现在让我们使用 GitHub Desktop 将其添加到 remote
使用 GitHub 桌面添加源/主
让我们打开 GitHub 桌面应用。我们将通过添加chapter8项目开始使用它。要做到这一点，请单击顶部主应用菜单中的文件下拉列表。接下来，单击 addlocalrepository 命令。
将出现一个弹出窗口。此弹出窗口的标题为“添加本地存储库”。在弹出窗口的主体中，我们可以看到一个带有占位符的输入字段，占位符读取存储库路径。旁边是选择本地存储库的按钮。让我们点击选择。。。按钮
单击“选择…”。。。按钮将打开 Windows 资源管理器，在那里我们可以导航到chapter8文件夹的位置。选择chapter8文件夹后，只需单击 Windows 资源管理器窗口底部的“选择文件夹”按钮。
接下来，只需单击弹出窗口中的添加存储库按钮，如下所示：
就这样！您刚刚添加了本地存储库。现在，您已经准备好发布它了。
发布本地存储库
要发布本地存储库，只需单击发布存储库按钮，如下所示：
单击“发布存储库”按钮后，将出现一个新的弹出窗口。只有以下默认设置已添加到“发布存储库”弹出窗口：
- 存储库名称（将显示在 GitHub 中）
- 说明（默认为空）
- 保持此代码私有复选框（选中）
让我们接受默认设置并单击发布存储库按钮。现在，我们的 GitHub 帐户中将有一个新的私有存储库。
回到 GitHub，这里是我们的远程存储库：
如果我们点击左侧边栏中指向chapter8的链接，我们将被带到我们的存储库，如下所示：
在这里，我们可以看到我们的整个项目。
我们还可以看到，我们的存储库中目前有 2 个提交。单击 2 提交链接将带我们进入一种提交的可视 Git 日志，在这里您还可以单击每个提交，以检查在项目历史中的特定时间所做的更改。
接下来，我们将发布我们的项目，以便可以在 GitHub 页面上看到它。
在 GitHub 页面上发布我们的项目
GitHub Pages 是一种托管服务。您可以在那里托管静态文件。这意味着您不能用后端托管数据库，因此不能添加使用后端技术（如 PHP、Node、.NET 等）编写的项目。
不过，有趣的是，一个由静态文件组成的简单项目可以走多远。您甚至可以使用 GitHub 的无服务器博客平台 Jekyll 来主持博客。
然而，本节的重点是发布我们的简单 Vue 应用，所以让我们准备好这样做。
准备发布我们的项目
我们将从 GitHub 上的存储库仪表板开始。让我们导航到设置选项卡，如下所示：
接下来，我们需要向下滚动到 GitHub 页面部分，如下所示：
查看前面的屏幕截图，我们可以看到，在将存储库发布到 GitHub 页面之前，我们需要将其公开。为此，我们只需单击“公开”按钮（危险区标题下的第一个按钮），如下所示：
在出现的弹出窗口中，我们将键入存储库的名称以确认选择，然后单击“我理解，将此存储库公开”按钮。GitHub 可能会要求您在此阶段重新键入密码。
现在，您需要再次向下滚动到 GitHub 页面部分，并单击下拉按钮。在下拉列表中选择主分支，如下所示：
选择主分支后，主菜单下会出现一个警报，其内容为“GitHub Pages source saved”，如下所示：
最后，再次向下滚动到 GitHub 页面部分，您将看到以下消息：
现在一切都准备就绪，可以在 GitHub 页面上发布，但我们仍然需要配置 Vue 应用。
更新 Vue 配置文件
我们在本书中看到了所有的配置文件，所以 Vue 本身也有一个配置文件就不足为奇了！此文件的名称为vue.config.js，它位于我们项目的根目录中。此文件是可选的，因此vue.config.js不是预装的项目。让我们将其添加到项目的根目录中，并向其中添加以下代码：
// vue.config.js
module.exports = {
// options...
}
我们将为 Vue 配置文件提供的第一个选项是publicPath，如下所示：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/chapter8/'
: '/'
}
您可以通过以下 URL 阅读有关此设置的更多信息：https://cli.vuejs.org/guide/deployment.html#github-第页。
让我们保存更改并使用 GitHub Desktop 将其提交并推送到远程存储库。
使用 GitHub Desktop 保存更改并将其推送到远程存储库
打开 GitHub 桌面，您将看到列出的更改。只需在应用的左下角键入提交消息，然后单击提交到主控按钮（GitHub 桌面应用左下角的蓝色按钮，如以下屏幕截图所示）：
单击 Commit to master 按钮后，您需要将更改推送到 origin（远程存储库的另一个名称），如下所示：
不幸的是，我们的存储库仍然不会发布。要发布它，我们需要在根目录中打开.gitignore文件，并注释掉/dist文件夹，这样它就不再被忽略，如下所示：
.DS_Store
node_modules
#/dist
接下来，我们将使用以下命令构建项目：
npm run build
我们将看到以下消息：
Build deployed. The dist directory is ready to be deployed.
使用消息提交 GitHub 桌面中的更改，例如：Prepare dist directory。之后，像前面一样，单击“按原点”按钮。
调试 GitHub 页面部署
有时候，事情并不像人们想象的那样运转。在这种情况下，您只需在项目中找到隐藏的.git文件夹，然后将其删除即可。这将删除本地存储库。接下来，更新vue.config.js文件，如下所示：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/chp8/'
: '/'
}
回到 GitHub 桌面，应用将注意到您的更改，并向您提供发布存储库的功能。提供的存储库名称为chapter8，但您需要将其重命名为chp8。回到 GitHub，找到新的chp8存储库，并将其设置为 public。请注意，您可以在 GitHub 桌面的弹出窗口中执行此操作。无论您是如何做到的，都必须公开存储库。接下来，向下滚动到 GitHub 存储库仪表板的设置选项卡中的 GitHub 页面部分，并在主分支上发布一个新的 GitHub 页面项目，就像我们之前所做的那样。
在这一点上，Vue 文档中并不完全清楚如何在 GitHub 页面上轻松部署网站。目前有效的方法是将您的dist文件夹发布为子树存储库。以下是用于实现此目的的命令：
git init # with /dist un-ignored in .gitignore
npm run build
git add dist
git commit -m "Init dist"
git status
git subtree push --prefix dist origin master
git add --all
git commit -m "Publish all"
create mode 100644 README.md
create mode 100644 babel.config.js
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 public/favicon.ico
create mode 100644 public/index.html
create mode 100644 src/App.vue
create mode 100644 simg/logo.png
create mode 100644 src/components/HelloWorld.vue
create mode 100644 src/main.js
# make some additional changes, follow it up with ''npm run build''
git add dist
git commit -m "Publish chp8 title"
git subtree push --prefex origin master
可在https://github.com/ImsirovicAjdin/chp8找到本章的存储库。如果查看文件结构，您会注意到存储库如下所示：
css/
└── app.11c93175.css
img/
└── logo.82b9c7a5.png
js/
├── app.8c7f6fb3.js
├── app.8c7f6fb3.map
├── chunk-vendors.ecd76ec1.js
└── chunk-vendors.ecd76ec1.js.map
favicon.ico
index.html
显然，git subtree push --prefix dist origin master命令只将dist目录的内容推送到 GitHub。为了更好地理解本章的存储库是如何工作的，请参考本书代码中的chapter8文件夹，打开它后，在命令行程序中对其运行git log命令。
总结
在本章中，我们了解了 Git 和 GitHub 的基本知识。我们已经了解了如何设置和使用 GitHub 桌面，以及如何使用它快速方便地将本地存储库推送到 GitHub 上的远程存储库。
此外，我们还研究了如何将分支添加到我们的应用中，以及如何将这些分支与主分支合并。最后，我们讨论了为了在 GitHub 页面上发布项目需要对项目进行的调整。
版权属于：月萌API www.moonapi.com，转载请注明出处
