零、前言

VuePress 将自己描述为一个Vue 供电的静态站点发电机。换句话说,VuePress 是一个简单的工具,可以让您在几分钟内创建静态站点和单页应用程序SPA

您在 VuePress 中构建的任何东西都是搜索引擎友好的、完全优化的、移动友好的,而且速度非常快,因为没有数据库驱动的操作或外部引擎可供使用。您只需在 Markdown 中输入内容,VuePress 就会将 Markdown 文件解析为有效的 HTML。

但是 VuePress 不仅仅是静态站点生成,还有很多事情要做!您可以自定义其外观,调整默认的最小主题,并利用 Vue.js 专业技能扩展站点的功能。考虑到 Vue.js 的受欢迎程度正在稳步上升,VuePress 已经站在了一个巨人的肩膀上,具有很大的增长潜力!

本快速入门指南将帮助您在短时间内完成 VuePress 的应用!

这本书是给谁的

本书面向希望学习如何在 VuePress 中构建静态站点的任何人。VuePress 将所有内容呈现为 HTML,然后作为 SPA 执行。这意味着一切工作都很快,并在短时间内加载。

如果您是一名 JavaScript 开发人员,或者希望专注于 Vue.js,VuePress 可以证明是一个方便的工具。本书将帮助您了解 VuePress 的功能和方法,从而帮助您习惯 Vue.js 的操作方式。此外,如果您希望以降价方式创建一个简单的站点,例如现有或即将推出的项目的文档站点,VuePress 可以证明是一个完美的解决方案。在这种情况下,本快速入门指南就是您掌握 VuePress 所需的全部内容。

除此之外,如果你只是想学习一些关于静态站点和静态站点生成器的知识,那么这本书也是为你准备的!

这本书涵盖的内容

第一章静态站点生成器和 VuePress 简介向读者介绍静态站点生成器,如 Jekyll、Hugo 和 Hexo。在特别讨论 VuePress 之前,本章还将讨论与静态站点生成器相关的各种优点和可能的缺点。

第二章关于 VuePress 的入门主要讲述 VuePress。本章将介绍一些概念,如对 Vue.js 的基本理解、VuePress 是什么、它能做什么(不能做什么),以及如何在 VuePress 中开始工作。本文还介绍了 VuePress 的安装,包括全局级别的安装和依赖性安装。

第 3 章VuePress 开发-初步步骤包括与 VuePress 配置值相关的注释,包括基本级别和构建管道的注释。除此之外,VuePress 中的资产处理和 URL 结构也包含在本章中。

第 4 章在 VuePress 中创建一个站点就是我们开始实际站点开发的地方!本章包括一个关于如何在 VuePress 中构建关于咖啡的静态站点的分步教程。该站点的代码(包括 Markdown 和呈现的 HTML)可以在本书的 GitHub repo 中找到。

第 5 章在 VuePress 中使用 Markdown,介绍了在 VuePress 中使用 Markdown。如果您不熟悉 Markdown,本章还将简要介绍其语法和格式,以及如何在 VuePress 中使用 Markdown。

第 6 章VuePress 中的主题发展涉及 VuePress 中的主题发展。本章将讨论与默认主题定制、导航栏和边栏设置、Git 集成以及自定义主题开发相关的主题。

第 7 章更多地使用 VuePress,首先讨论 VuePress 的国际化。它还教您如何在 VuePress 中本地化站点,然后讨论增长潜力、未来路线图以及与 VuePress 相关的其他因素。

第 8 章将 VuePress 部署到 Web,介绍了 VuePress 部署到主机提供商 Heroku、Netlify 和 Surge.sh 上的远程服务器。本章遵循详细的分步方法,帮助您轻松部署 VuePress 站点。

充分利用这本书

以下技能、工具和实用程序可以证明非常有用,并帮助您充分利用本书:

  • 工作站:显然,为了真正学习 VuePress 开发,您需要一台电脑,无论是笔记本电脑还是台式机。如果你的电脑内存不足,不要担心;VuePress 对资源的使用不是很高。
  • 基本编码技能:您需要对 JavaScript 和 Vue 有基本的了解。如果没有这一点,您可能仍然能够绕过 VuePress,尽管这需要一些额外的时间。然而,为了在 VuePress 中建立一个合法的网站,必须具备降价的工作知识。
  • 代码编辑器:建议有一个好的代码编辑器,以便更好地格式化您的代码和文件。Visual Studio 代码是作者通常使用的代码,但您可以自由选择任何免费或高级编辑器。
  • Node.js 和 npm:运行 VuePress 需要 Node.js 8+。本书第二章介绍了它的安装。
  • 互联网连接和网络浏览器:这不是很明显吗!您无法在没有浏览器和 internet 的情况下构建和部署网站。

下载示例代码文件

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

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

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

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

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

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

我们的丰富书籍和视频目录中还有其他代码包,请访问https://github.com/PacktPublishing/ 。看看他们!

下载彩色图像

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

使用的惯例

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

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

代码块设置如下:

module
    .exports = {
        head: [
            [ ... ]
        ]
    }

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

git add --all
git commit -m "initial commit"
git push -u origin master

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

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