零、序言
这本书是关于使用 Vue.js、Bootstrap 和 Firebase 进行 web 开发的。我们将从一个简单的教程开始，然后是详细的解释，然后，我们将从头开始创建一个功能齐全的应用程序。该应用程序本身是一个简单的 Pomotoro 计时器，在 Pomotoro 休息期间提供综合办公室训练。在本书中，您将经历整个软件开发过程，从需求、用户故事和模型的定义开始，到基本的搭建，然后用复杂的功能丰富应用程序，如身份验证、路由、协作内容、，完成全面测试部署。您将学习如何使用 Firebase 实现 Vue 应用程序的身份验证和存储，以及最终如何部署它。您将享受在 Vue 应用程序中使用 Bootstrap，以便轻松实现复杂组件并实现其响应能力。通过将三角函数与 SVG 和 Vue.js 结合使用以构建反应式计时器组件，您将重新了解您的三角函数知识。因此，就技术而言，我们将涵盖以下主题：
- Vue.js 数据绑定和单文件组件
- 使用 vue 路由进行路由
- 使用 nuxt.js 进行服务器端渲染和代码拆分
- 开玩笑地测试
- 基于 Firebase 的实时数据库
- 使用 Firebase 身份验证的身份验证
- 使用 Firebase 部署
- 将 SVG、三角法和 Vue.js 组合到反应式组件中
在日常工作中，您可以充分利用 POMO 的功能和功能。
这本书涵盖的内容
第 1 章、请自我介绍，介绍了一个实现“你好，我是<姓名>页面”的教程。它将 Vue.js 与 Bootstrap 相结合用于基本表单，将 Firebase 用于基本存储。
第 2 章，在引擎盖下-教程讲解，介绍了第一章中使用的技术—Vue.js、Bootstrap 和 Firebase。它不仅涵盖了每个框架或服务，还解释了这些工具如何协同工作。
第三章、让我们开始，描述了在本书的过程中将要实现的内容。它描述了应用程序及其要求。它包含一些用户故事并定义了应用程序的功能。
第四章让它去 Pomodoro！介绍了 Vue.js 应用程序使用 Webpack 加载程序的引导阶段。它将基本功能添加到 Pomodoro 计时器中。它还解释了如何使用引导的网格以及基本的 Vue.js 指令。
第 5 章配置您的 Pomodoro，通过配置和个性化丰富应用程序。它还包括使用 Firebase 数据库和 Vuex 状态管理体系结构的数据存储和检索机制。它涵盖了引导模式和表单以及 Vue.js 组件系统的使用。
第六章、请验证！，将基于 Firebase auth API 的身份验证添加到应用程序中。在可视化层，它解释了如何通过引导构建表单。
第 7 章使用 vue 路由和 Nuxt.js添加菜单和路由功能，说明如何使用引导元素和 vue 路由的路由功能将导航菜单嵌入到应用程序中。它还描述了如何使用 nuxt.js 在 Vue 应用程序中实现服务器端渲染、代码拆分和路由。
第 8 章、让我们合作——使用 Firebase 数据存储和 Vue.js添加新的训练，将协作内容添加到应用程序中。同样，它使用引导式表单，Vue.js 为这些表单添加反应性，Firebase 存储协作内容。
第 9 章、测试和测试介绍了如何在 Vue.js 应用程序中添加单元测试和端到端测试。
第 10 章使用 Firebase部署，介绍了使用 Firebase 托管解决方案部署应用程序的过程。
这本书你需要什么
本书的要求如下：
- 具有活动 internet 连接的计算机
- 文本编辑器/IDE
- Node.js
这本书是给谁的
这本书是为网络开发者或想成为网络开发者的人而写的。您将从头开始构建一个完整的堆栈 web 应用程序，直至其部署。即使你是一个有经验的程序员，你也可能会为自己找到新的东西。如果您正在使用 Vue.js，您将了解如何将 Vue.js 应用程序连接到 Google Firebase 后端。如果使用 Bootstrap，您将了解它与 Vue.js 应用程序的配合效果。如果您已经使用 Vue.js、Bootstrap 和 Firebase，您将了解如何利用这三种功能轻松构建复杂的应用程序。如果您已经同时使用了这些技术，那么在本书的学习过程中，您将很高兴构建另一个应用程序。
公约
在本书中，您将发现许多文本样式可以区分不同类型的信息。下面是这些风格的一些例子，并解释了它们的含义。
文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄如下所示：“现在在新创建的目录中运行npm install
代码块设置如下：
//LandingPage.vue
export default {
components: {
Logo,
Authentication,
GoToAppLink,
Tagline
}
}
当我们希望提请您注意代码块的特定部分时，相关行或项目以粗体显示：
//LandingPage.vue
export default {
components: {
Logo,
Authentication,
GoToAppLink,
Tagline
}
}
任何命令行输入或输出的编写方式如下：
# npm install sass-loader node-sass --save-dev
新术语和重要词语以粗体显示。您在屏幕上看到的文字（例如，在菜单或对话框中）显示在文本中，如下所示：“单击下一个按钮将移动到下一个屏幕。”
注
警告或重要注释显示在这样的框中。
提示
提示和技巧如下所示。
读者反馈
我们欢迎读者的反馈。让我们知道你喜欢或不喜欢这本书的内容。读者反馈对我们来说很重要，因为它可以帮助我们开发出您将真正从中获得最大收益的标题。
要向我们发送总体反馈，只需发送电子邮件<[feedback@packtpub.com](mailto:feedback@packtpub.com)>，并在邮件主题中提及该书的标题。
如果您对某个主题有专业知识，并且您有兴趣撰写或贡献一本书，请参阅我们的作者指南www.packtpub.com/authors。
客户支持
既然您是一本 Packt 图书的骄傲拥有者，我们有很多东西可以帮助您从购买中获得最大收益。
下载示例代码
您可以从您的帐户下载本书的示例代码文件 http://www.packtpub.com 。如果您在其他地方购买了本书，您可以访问http://www.packtpub.com/support 并注册，将文件直接通过电子邮件发送给您。
您可以通过以下步骤下载代码文件：
- 使用您的电子邮件地址和密码登录或注册我们的网站。
- 将鼠标指针悬停在顶部的支架选项卡上。
- 点击代码下载&勘误表。
- 在搜索框中输入图书名称。
- 选择要下载代码文件的书籍。
- 从您购买本书的下拉菜单中选择。
- 点击代码下载。
您也可以通过点击 Packt 出版网站上该书网页上的代码文件按钮下载代码文件。在搜索框中输入图书名称即可访问此页面。请注意，您需要登录到您的 Packt 帐户。
下载文件后，请确保使用以下最新版本解压或解压缩文件夹：
- WinRAR/7-Zip for Windows
- 适用于 Mac 的 Zipeg/iZip/UnRarX
- 适用于 Linux 的 7-Zip/PeaZip
该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Vue.js-2-and-Bootstrap-4-Web-Development 。我们在上还提供了丰富的书籍和视频目录中的其他代码包 https://github.com/PacktPublishing/ 。看看他们！
下载本书彩色图片
我们还提供了本 PDF 文件中使用的彩色图像截图。彩色图像将帮助您更好地了解输出中的更改。您可以从下载此文件 https://www.packtpub.com/sites/default/files/downloads/Vuejs2andBootstrap4WebDevelopment_ColorImages.pdf 。
T0 勘误表
虽然我们已尽一切努力确保内容的准确性，但错误确实会发生。如果您在我们的一本书中发现错误，可能是文本或代码中的错误，如果您能向我们报告，我们将不胜感激。通过这样做，您可以使其他读者免于沮丧，并帮助我们改进本书的后续版本。如果您发现任何错误，请访问进行报告 http://www.packtpub.com/submit-errata ，选择您的书籍，点击勘误表提交表链接，输入您勘误表的详细信息。一旦您的勘误表得到验证，您的提交将被接受，勘误表将上载到我们的网站或添加到该标题勘误表部分下的任何现有勘误表列表中。
要查看之前提交的勘误表，请转至https://www.packtpub.com/books/content/support 并在搜索字段中输入图书名称。所需信息将出现在勘误表部分下。
盗版
在互联网上盗版版权材料是所有媒体都面临的一个持续问题。在 Packt，我们非常重视版权和许可证的保护。如果您在互联网上发现任何形式的非法复制品，请立即向我们提供地址或网站名称，以便我们采取补救措施。
请致电<[copyright@packtpub.com](mailto:copyright@packtpub.com)>与我们联系，并提供可疑盗版材料的链接。
我们感谢您在保护我们的作者方面提供的帮助以及我们为您带来有价值内容的能力。
问题
如果您对本书的任何方面有任何问题，可以通过<[questions@packtpub.com](mailto:questions@packtpub.com)>与我们联系，我们将尽力解决该问题。
版权属于：月萌API www.moonapi.com，转载请注明出处
