Vue.js CLI 中的多个页面

Question

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

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

原文由 Martin Zahariev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意指出用户应该接受的答案

在发布我最初的答案时，我并不知道在 VueJS 中实际构建 MPA 的可能性。我的回答没有解决所提出的问题，因此我建议看看下面 PJ.Wanderson 提供的答案，这 应该是公认的答案

初始答案

Vue.js 项目是 SPA（单页应用程序）。整个项目中只有一个 .html 文件，即您提到的 index.html 文件。您要创建的“页面”在 vue.js 中称为组件。它们将被插入 index.html 文件并在浏览器中呈现。一个 vue.js 组件包括 3 个部分：

 <template>

</template>

<script>
export default {

}
</script>

<style>

</style>

• 模板：它包含您的页面应显示的所有 html（这是您放置页面 html 的位置）
• 脚本：它包含将在页面/组件上执行的所有 JavaScript 代码
• 样式：它包含将为特定组件/页面设置样式的 CSS

您可以查看本教程以获取快速 入门 Vue.js 2 快速入门教程 2017

它解释了 vue.js 项目结构以及各种文件如何相互关联

原文由 Hippolyte Fayol 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

第一：始终阅读官方文档。使用 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 链接： 构建 MPA 应用程序

原文由 PJ.Wanderson 发布，翻译遵循 CC BY-SA 4.0 许可协议