Vue.js CLI中有多个页面

Question

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

我在Vue文档中看到了诸如vue-router和"pages"之类的内容,但我对它们并不了解.我有什么选择？是否有一个指南详细解释,因为我找不到任何,更不用说详细了.如果你能提供帮助,我们将非常高兴!谢谢!

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,您可以使用vue create youProject创建一个新项目,并设置为手动配置它.然后,不要选择SPA选项.Vue将使用MPA方法创建一个不错的"开始"项目.之后,只需在vue.config.js上重复配置.

更新了#1

似乎Vue Cli上的一些更新改变了构建MPA应用程序的方式,因此:

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

创建的样板将是SPA.但是,做出这样的改变:

• 在srcnamed 下创建一个文件夹pages(可选)

• 进入此文件夹创建自己的页面:Home,About等.

• 将src中的App.vue和main.js复制并粘贴到新文件夹中 - Home等.
• 将数据格式化App.vue为此文件夹,就像您一样
• 创建一个vue.config.js并设置如下:https://cli.vuejs.org/config/#pages

下面,我有三张图片展示了这一点:

• 第一:全新的应用程序
• 第二个:同样的应用程序,我上面做的更改
• 第三:来自这个应用程序的vue.config.js

您不需要创建pages文件夹,只需了解想法.

链接到GitHub:构建MPA应用程序

Answer 2

编辑:Vue有这个内置.跳到底部了解更多信息.

原始答案:

有两种方法可以解释您的问题,因此可以回答它.

第一种解释是:"我如何支持在同一单页应用程序中路由到不同页面,例如localhost:8080/about和localhost:8080/report等？".答案是使用路由器.它相当简单,效果很好.

第二种解释是:"我的应用程序很复杂,我有多个单页面应用程序,例如一个应用程序用于'网站'部分,一个应用程序供消费者登录和工作,一个应用程序用于管理员等 - 如何vue这样做,没有制作三个完全独立的存储库？"

后者的答案是具有多个单页面应用程序的单个存储库.这个演示看起来就像你正在追求的:

https://github.com/Plortinus/vue-multiple-pages/

请特别注意:https://github.com/Plortinus/vue-multiple-pages/blob/master/vue.config.js

更新的答案:

事实证明,vuejs有内置多个顶级页面的想法.我的意思是,这是有道理的 - 尽管许多不正确的答案都在说"不,这是单页应用程序",但它会非常普遍!

您想要文件中的pages选项vue.config.js:

https://cli.vuejs.org/config/#pages

如果您的项目在根目录中没有该文件,请创建它,vuejs将发现它.

定义每个页面有很长很短的方法.我在这里使用了简短形式:

module.exports = {
  pages: {
    index: 'src/pages/index/main.ts',
    experiment: 'src/pages/experiment/main.ts'
  }
}

您不必将您的工作放在"页面"下.它可能是"/src/apps/index/index.ts"或其他什么.

移动代码并更改一些导入后:

import HelloWorld from './components/HelloWorld'

至

import HelloWorld from '@/components/HelloWorld'

该应用程序工作 - 但我的回购中的"实验"应用程序必须像这样加载:

http://localhost:8080/experiment.html

非常难看,甚至更糟糕,因为它使用导致URL的路由器,如:

http://localhost:8080/experiment.html/about

啊.

幸运的是,这个stackoverflow的答案解决了它.更新vue.config.js文件以包含devServer选项(确保它位于导出对象的顶层:

devServer: {
  historyApiFallback: {
    rewrites: [
      { from: /\/index/, to: '/index.html' },
      { from: /\/experiment/, to: '/experiment.html' }
    ]
  }
}

然后还修改router.ts文件以附加额外路径(在我的情况下为"experiment /":

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL + 'experiment/',
  ...

然后URL很好地解决,例如:http:// localhost:8080/experiment/about

Answer 3

注意向用户指出应该接受的答案
在发布我最初的答案时，我并不知道在 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 项目结构以及各个文件如何相互关联