javascript - Vue.js CLI 中的多个页面

Question

我无法弄清楚如何在 Vue CLI 项目中拥有多个页面。现在我的主页有一些组件，我想创建另一个页面，但我不知道该怎么做。我应该在默认情况下创建多个 index.html 的 html 文件吗？在以 css js img 文件夹和 html 文件作为页面的简单文件结构中，我知道创建另一个 html 文件意味着制作另一个页面。但我不明白这是如何与 Vue CLI 项目一起工作的。

我在 Vue 文档中看到了诸如 vue-router 和“页面”之类的东西，但我不是很了解它们。我有什么选择？有没有详细解释的指南，因为我找不到，更不用说详细了。如果您能提供帮助，将非常高兴!谢谢!

Answer 1

首先:始终阅读官方文档。使用 Vue 你可以构建一个 SPA，一个 MPA 也没有问题。只需按照指南操作即可:

• https://cli.vuejs.org/
• https://cli.vuejs.org/guide/html-and-static-assets.html#building-a-multi-page-app
• https://cli.vuejs.org/config/#pages

您应该使用 Vue CLI 3 创建一个新项目。创建项目后，将其设置为手动配置。确保您不选择 SPA 选项。然后，Vue 将使用 MPA 方法创建一个不错的“开始”项目。之后，只需在 vue.config.js 上重复配置即可。

---

更新#1

似乎 Vue Cli 的一些更新改变了构建 MPA 应用程序的方式，所以:

• 创建一个新的应用vue create test
• 选择手动配置

创建的样板将用于 SPA。因此进行以下更改:

• 在 src 下创建一个名为 pages 的文件夹(可选)

• 在此文件夹中创建您自己的页面:主页、关于等。

• 将 src 中的 App.vue 和 main.js 复制并粘贴到您的新文件夹 - Home 等

• 根据您的喜好将 App.vue 格式化到此文件夹中。

• 创建一个 vue.config.js 并像这样设置它:https://cli.vuejs.org/config/#pages

下面，我用三张图片展示了这一点:

• 首先:一个全新的应用
• 第二个:同一个应用程序，但我在上面进行了更改
• 第三:来自这个应用的 vue.config.js

您不需要创建pages文件夹，这只是为了理解。

GitHub 链接:Building a MPA App