Skip to content

Latest commit

 

History

History
118 lines (70 loc) · 9.57 KB

File metadata and controls

118 lines (70 loc) · 9.57 KB

零、前言

Vue 最初是一个人的项目,Evan You。令人惊讶的是,它已经达到了今天的水平:成为最受欢迎的前端框架的竞争者,与公司支持的 React 和 Angular 竞争

当然,这些并不是唯一的前端框架,但 Vue、React 和 Angular 三者似乎是最受欢迎的,互联网上充斥着对这些框架的比较和体验。例如,经常会看到一篇比较 Vue 和 React 的文章,或者一篇关于 Vue 优于 React 的十种方式的博客文章。无论这些文章是某人的观点,还是点击诱饵,还是事实陈述,这些说法一定有一定的真实性

Vue 成功的原因是什么?奉献、努力还是运气?可能每个都有一点。但 Vue 成功的另一个关键是 Evan 明显优先考虑让开发人员轻松工作。Vue 不再由一个人开发,但它仍然非常平易近人。社区从一开始就保留了 Vue 的要点:一个简单易用的框架,它不妨碍您,只允许您编写代码。

Vue CLI 是这方面的另一个示例。除了命令行接口,它与其他现代前端框架一样,VUE CLI 3 java 在前端 JavaScript 框架中设置了一个新的标准,并且附带了一个 Ty0 T0 图形用户界面(Ty2 T2)。该界面使设置、扩展、运行和服务 Vue 项目变得轻而易举

当您将 GUI 的添加与通过提供经过深思熟虑的设置过程来缓解工具链疲劳的成功尝试结合在一起时,您将得到一个非常强大的组合,从而使开发人员感到高兴。

这本书是给谁的

本书面向希望进一步了解 Vue CLI 3 的 web 开发人员和 JavaScript 开发人员。读者必须具备 HTML/CSS 和 JavaScript 的基本知识。基本上,读者还应该熟悉基本的操作系统工作流,例如使用类似 UNIX 的命令行界面,包括 Git Bash、Windows PowerShell 或任何相关的命令行工具

本书深入介绍了 Vue CLI 3 的技术构建块。这不是一本关于在 Vue 中编写应用的书。它更像是一本基础性的书,可以帮助您了解 Vue CLI 中的工作原理。如果您从未完全确定 NPM 如何工作以及如何正确使用它,本书将通过 Vue CLI 3 的视角对此进行解释。类似地,我们将研究 webpack,HMR,使用单文件.vue组件,SCS,ECMAScript,使用 Jest 进行单元测试,使用 Cypress 进行 E2E 测试。

这本书涵盖的内容

第一章介绍了 Vue CLI 3,介绍了如何使用 Vue CLI 3,以及为什么要使用它。它涵盖了最佳实践以及使用 Vue CLI 3 将获得的好处。我们将设置节点版本管理器和 NPM,安装 Vue CLI 3,并演示如何通过命令行或借助 GUI 启动新应用。

Vue CLI 3 中的第 2 章中的Webpack,向读者概述了 JavaScript 在过去几年中的演变,这些演变导致了 Webpack 的出现。中介绍了一些背景概念:NPM 和 NPM 脚本、CommonJS、JS 和 Node.JS 中的模块,以及模块绑定器,以及如何在浏览器中使用它们。接下来,我们将介绍 webpack,它是如何工作的,以及如何运行它。在本章结束时,我们将逐步介绍如何通过 NPM 添加 Vue 项目并使用 webpack。从本质上说,我们正在手动设置 Vue 工具链,以便我们能够自动了解 Vue CLI 3 为我们所做的工作。

第 3 章Vue CLI 3中的巴别塔探讨了如何使用巴别塔以及使用它的好处。我们检查了 Vue 核心巴别塔插件的构建块,包括Babel 7babel-loader@vue/babel-preset-app。我们还了解了运行 ES5 和 webpack 的 ES5 和 webpack 之间的差异。

第 4 章Vue CLI 3中的测试介绍了 Vue 插件的使用,重点介绍了用于测试的插件。我们将 Jest 插件添加到 Vue 应用中,使用 Jest 运行单元测试,并在 Vue CLI 3 GUI 中显示一些其他技术和工作流,包括从项目任务页面运行任务和在 GUI 中运行单元测试。我们将讨论测试驱动开发TDD)和使用断言,并以 Cypress 概述结束本章。

第 5 章Vue CLI 3 和路由讨论了使用 Vue 路由和 vuex 添加 Vue 项目、配置预设选项以及理解 Vue 路由主题。其中包括命名路由、动态路由、使用 Vue 实例中的方法导航到路由、使用子路由以及延迟加载路由。

第 6 章在 Vue CLI 3中使用 ESlint 和 Prettier,向我们展示了什么是 ESlint 以及它为什么有用。我们还将介绍 Prettier,它是一种方便的代码格式化程序,可在每次保存时对代码进行格式化。我们一般讨论过梁以及它们的用途。

第 7 章使用 SCSS改进 CSS,介绍了 SCSS 的基础知识,并展示了它与 CSS 的区别以及有哪些附加功能可用。我们使用在第 5 章Vue CLI 3 和路由中构建的一个简单应用,我们了解如何通过在应用中添加 boostrap Vue 插件来改进其样式。在 VDOM 库中使用 SCS 有时会令人困惑,在本章中,我们将看到一种可能的工作流选项

第 8 章在 GitHub 页面上部署 Vue CLI 3 应用,说明什么是 Git 以及如何设置它。我们讨论了一些基础知识,包括使用 Git 跟踪更改和在应用中提交更改。我们继续讨论三棵树的概念、分支和合并分支。我们注册一个 GitHub 帐户,使用 GitHub 桌面添加 origin/master,并了解如何发布本地存储库。最后,我们将讨论如何使用子树功能在 GitHub 页面上部署 Vue 应用。

充分利用这本书

要充分了解本书,您应该熟悉使用 Windows、HTML、CSS、JavaScript 的基础知识,以及使用 Git Bash for Windows 等命令行工具。熟悉 Node、NPM 和一些基本的命令行实用程序会有所帮助,但这不是必须的。

下载示例代码文件

您可以从您的账户www.packt.com下载本书的示例代码文件。如果您在其他地方购买了本书,您可以访问www.packt.com/support并注册,将文件通过电子邮件直接发送给您。

您可以通过以下步骤下载代码文件:

  1. 登录或注册www.packt.com
  2. 选择“支持”选项卡。
  3. 点击代码下载和勘误表。
  4. 在搜索框中输入图书名称,然后按照屏幕上的说明进行操作。

下载文件后,请确保使用以下最新版本解压或解压缩文件夹:

  • WinRAR/7-Zip for Windows
  • 适用于 Mac 的 Zipeg/iZip/UnRarX
  • 适用于 Linux 的 7-Zip/PeaZip

该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Vue-CLI-3-Quick-Start-Guide 。如果代码有更新,它将在现有 GitHub 存储库中更新。

下载彩色图像

我们还提供了一个 PDF 文件,其中包含本书中使用的屏幕截图/图表的彩色图像。您可以在这里下载:http://www.packtpub.com/sites/default/files/downloads/9781789950342_ColorImages.pdf

使用的惯例

本书中使用了许多文本约定。

CodeInText:表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄。下面是一个示例:“将下载的WebStorm-10*.dmg磁盘映像文件作为系统中的另一个磁盘装载。”

代码块设置如下:

{
  "name": "vue-from-npm",
  "version": "1.0.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

当我们希望提请您注意代码块的特定部分时,相关行或项目以粗体显示:

let CustomArticle = Vue.component('custom-article', {
    template: `
      <article>
        Our own custom article component!
      </article>`
  })

任何命令行输入或输出的编写方式如下:

mkdir new-project-with-webpack && cd new-project-with-webpack

粗体:表示一个新术语、一个重要单词或您在屏幕上看到的单词。例如,菜单或对话框中的单词出现在文本中,如下所示。下面是一个示例:“从管理面板中选择系统信息。”

Warnings or important notes appear like this. Tips and tricks appear like this.

联系

我们欢迎读者的反馈。

一般反馈:如果您对本书的任何方面有疑问,请在邮件主题中注明书名,并发送电子邮件至customercare@packtpub.com

勘误表:尽管我们已尽一切努力确保内容的准确性,但还是会出现错误。如果您在本书中发现错误,如果您能向我们报告,我们将不胜感激。请访问www.packt.com/submit-errata,选择您的书籍,点击 errata 提交表单链接,并输入详细信息。

盗版:如果您在互联网上发现我们作品的任何形式的非法复制品,请您提供我们的位置地址或网站名称,我们将不胜感激。请通过copyright@packt.com与我们联系,并提供该材料的链接。

如果您有兴趣成为一名作家:如果您对某个主题有专业知识,并且您有兴趣撰写或贡献一本书,请访问authors.packtpub.com

评论

请留下评论。一旦你阅读并使用了这本书,为什么不在你购买它的网站上留下评论呢?然后,潜在读者可以看到并使用您的无偏见意见做出购买决定,我们 Packt 可以了解您对我们产品的看法,我们的作者可以看到您对他们书籍的反馈。非常感谢。

有关 Packt 的更多信息,请访问Packt.com