我无法弄清楚如何在 Vue CLI 项目中拥有多个页面。现在我的主页有一些组件,我想创建另一个页面,但我不知道该怎么做。我应该在默认情况下创建多个 index.html 的 html 文件吗?在以 css js img 文件夹和 html 文件作为页面的简单文件结构中,我知道创建另一个 html 文件意味着制作另一个页面。但我不明白这是如何与 Vue CLI 项目一起工作的。
我在 Vue 文档中看到了诸如 vue-router 和“页面”之类的东西,但我不是很了解它们。我有什么选择?有没有详细解释的指南,因为我找不到,更不用说详细了。如果您能提供帮助,将非常高兴!谢谢!
最佳答案
首先:始终阅读官方文档。使用 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
关于javascript - Vue.js CLI 中的多个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51692018/