后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 VuePress 构建我的新网站
我终于要上线我的新网站了，真是太开心了！技术栈方面，我还是保留了我最喜欢的 Vue 😆。但这次我决定用 VuePress。在本文中，我想分享一下我做出这个决定的缘由，以及我对使用 VuePress 的一些想法。
- 我之前用过
- 我为什么从 Nuxt 转到 VuePress
- VuePress 的优势
- VuePress 的挑战
- 从 Nuxt 切换到 VuePress 值得吗
我之前用过
在此之前，我一直在使用 Nuxt。我选择 Nuxt 是因为它是唯一提供服务器端渲染的。这对我来说很重要，因为它有 SEO 的优势。让我来解释一下这意味着什么。
这是初始 HTML 输出。Vue 随后接管并将所有组件插入到该id=app部分。这就是为什么在 Vue 中，你始终需要指定要将 Vue 应用附加到哪个元素。作为用户，你实际上并不会注意到这一点，因为它发生得非常快（取决于你的网速）。
Vue 应用
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="/js/app.js"></script>
</body>
</html>
正如您所见，初始加载时内容非常空洞。这使得我们的搜索引擎机器人很难抓取和挖掘您的宝贵数据，因为一开始什么都没有。
然而使用 Nuxt，你的应用首先在服务器端生成。所以一旦它进入你的浏览器，所有页面就已经被填充好了。
Nuxt 应用
<!DOCTYPE html>
<html>
<body>
<div id="app">
<h1>Hello there</h1>
</div>
<script src="/js/app.js"></script>
</body>
</html>
我喜欢这样比较。Vue 就像那些蓝色围裙（非赞助）的餐食，你必须在家自己动手制作。而 Nuxt 就像在餐厅点外卖，所有东西都送到你面前，可以直接享用 😋
反正我没想建一个花哨的网站。我只是想建一个内容网站，展示我的代码片段和文章😄。所以我不需要单页应用。我只需要一些经典的纯 HTML 代码。所以 Nuxt 就是我的菜！
我为什么从 Nuxt 转到 VuePress
如果 Nuxt 这么好，干嘛要换呢？为什么不继续用下去呢？嗯，因为我懒，哈哈。Nuxt 的优点在于它超级可配置。但这也是它的缺点，以前我得自己配置所有东西。我再也不想这么做了。这就像买房子一样。你可以买一块空地，也可以买一栋现房。土地很棒，因为你可以在上面建造任何你想建的房子，基本上是从零开始。但对我来说，我想要一栋现房，这样我就可以搬进去，什么都不用担心。
对我来说，VuePress 就是最好的选择。它内置了搜索插件，内置了超酷的 Markdown 语言，并且包含代码高亮等众多酷炫功能，而且它专为内容静态网站而设计。这正是我当时想要构建的。所以我决定换用 VuePress！
亚军：Gridsome
我差点就选了Gridsome。它提供了我创建静态内容网站所需的一切。但 Vue 团队推出了他们自己的替代方案——VuePress。所以我想，既然 Vue 团队开发了 VuePress，那我就用吧！事后看来，我觉得我应该多了解一下，因为 VuePress 确实存在一些挑战。稍后我会详细介绍。
VuePress 的优势
好吧，我们来谈谈我喜欢 VuePress 的几个方面。以下是我最喜欢的 3 个：
1. Markdown 功能
这就是我转向 VuePress 的主要原因。我记得在 Nuxt 中设置 Markdown 的时候非常困难。但这可能是因为我当时编程经验有限。所以我只实现了最低限度的功能。有了 VuePress，我几乎不用做任何工作就能使用这些酷炫的功能！
行突出显示
<p>I am not highlighted</p>
<p>I am highlighted</p>
在 Markdown 中使用 Vue
# My markdown
<VueComponent />
内部链接
[Home](/) <!-- I can use relative links -->
你可以在这里看到完整的 Markdown 扩展
2. 搜索
谁能想到这么小的功能竟然能带来如此大的影响呢？我以前的网站没有搜索功能。所以我会用谷歌搜索我自己的网站，看看有没有特别的花絮。我很惊讶我竟然没收到任何投诉邮件。也许那些人干脆就不再用我的网站了😳 我不怪你🤦♀️
你猜怎么着！VuePress 有一个内置的搜索功能。它是一个基于 header 的搜索插件。这意味着它会爬取你所有的 Markdown 文件，并返回与你的查询匹配的 header。太棒了！
3. 前言
Frontmatter 就像 Markdown 文件的数据。撰写 Markdown 文章时，很多时候你会想添加一些额外的信息。例如，作者姓名、创建日期、修改日期等等。如何在 Markdown 中传递这些信息呢？答案是使用 Frontmatter 块。
---
author: Samantha Ming
created: Jan 26
modified: Jan 30
---
# My new blog post
我想在我的旧网站上实现这个功能。但我无法让它工作，所以我创建了一个 JavaScript 对象来包含我所有的文章数据。这充分发挥了我作为开发者的创造力。如果它无法工作，你还可以找到其他方法。这就是自己做项目的妙处。它不必完美，只要你能到达目的地就行。即使这意味着要走很长的路，也没关系。因为这是你的派对，所以规则由你来制定！😂
VuePress 的挑战
我希望我能说这段用 VuePress 搭建网站的旅程是完美的。可惜，它并非如此。VuePress 很适合搭建技术文档网站。但我的网站本质上就像一个博客。所以我现在尝试着根据自己的需求来调整 VuePress。这很不容易。
文档缺少可配置任务的示例
VuePress 文档虽然在主要功能方面很棒，但对于更高级或可配置的任务来说，还是有点挑战性。我发现文档中的示例有点少。我来举个例子吧（示例过渡流畅，点个赞😂）。
我本来想把它安装vue-fontawesome到我的应用中，这样就能用 Font Awesome 图标了。但一直搞不清楚怎么操作。还好，有人指导我，我终于搞明白了。我真希望文档里没有一些用例示例。我觉得这肯定会帮到我。如果你看过 Vue 文档，就会发现里面有很多示例，而且非常易读。好消息是，我知道 VuePress 团队正在努力改进这一点。所以我很期待这件事的发生👏
顺便说一句，如果您感兴趣的话，这里是如何安装插件以与 VuePress 一起使用的方法。
有限的元数据支持
我使用 Nuxt 的时候，有个很棒的插件叫vue-meta。它允许你以编程方式为你的页面创建元数据。这对于 SEO 以及创建 Twitter 或 Facebook 的分享卡片都至关重要。
是的，VuePress 支持此功能。您可以在文件中设置通用的元数据config，也可以在 Markdown 文件中设置单独的元数据。
记得我提到过，这是因为我在 Nuxt 应用中没有设置 frontmatter。我最终使用了一个很大的 JavaScript 对象来存储每篇文章的所有数据。它也恰好包含了我所有的元数据。所以我想通过编程方式设置元数据。是的，我找到了一些非官方的插件。但它们主要依赖于在 frontmatter 中设置的元数据。所以那些插件不起作用。
还记得我提到我的亚军选择 Gridsome 吗？他们有这个功能！唉🤦♀️ 这是他们软件包的一部分。在他们的框架下，他们使用了vue-meta。我差点就为了这个功能切换到 Gridsome。但我已经走了很长一段路，所以我决定继续使用 VuePress。你可能会问，为什么不直接vue-meta用 VuePress 来配置呢？好问题！如果你知道如何配置，请给我发邮件！不是我不想，只是我实在想不出来。时间紧迫，所以我决定换个环境。顺便说一下，我需要设置vue-meta服务器端渲染。所以复杂度会更高一些。
无论如何，我目前的解决方案是使用我自己的自定义插件，该插件会以编程方式从 JavaScript 对象中提取元数据，并通过自定义插件将其设置在首页中。问题是，当我的网站部署时，我的元数据出现了重复（这是我最近才发现的）。唉，这应该算作问题了。我稍后会处理这个问题🤦♀️（如果我找到了解决方案，我会更新🤞）
我也在 VuePress 官方仓库中创建了一个问题，希望他们能考虑添加这个功能。如果你也喜欢这个功能，欢迎留言分享：
从 Nuxt 切换到 VuePress 值得吗
是的，100% 是！我花了整整两个月夜以继日地工作才完成这个网站。VuePress 内置了如此多的优秀功能，我节省了大量时间，无需自己动手构建。速度才是关键！我不想花时间配置任何东西。我不想构建任何不必要的东西。我想把时间花在执行上。这就是为什么我想选择一个预置了很多功能的 VuePress。于是，我选择了 VuePress。
希望您喜欢我使用 VuePress 的经验和反馈的总结。
下一篇文章我想讲一下为什么我决定更换 CSS 框架并使用Tailwindcss。敬请期待😊