Vue.js CLI中的多个页面

JavaScript

Stafan卡卡西

2020-03-12

我在弄清楚如何在Vue CLI项目中拥有多个页面时遇到了麻烦。现在,我的主页包含一些组件,我想创建另一个页面,但是我不知道该怎么做。我是否应该创建多个html文件,默认情况下index.html是?在使用css js img文件夹和html文件作为页面的简单文件结构中,我知道创建另一个html文件意味着制作另一个页面。但是我不知道这如何与Vue CLI项目一起使用。

我在Vue文档中看到了诸如vue-router和“ pages”之类的东西,但是我不太了解它们。我有什么选择?是否有指南对此进行了详细说明,因为我找不到任何指南,更不用说详细了。如果可以的话,将非常高兴!谢谢!

第1053篇《Vue.js CLI中的多个页面》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
伽罗L 2020.03.12

首先:请务必阅读官方文档。使用Vue,您还可以构建SPA:MPA没问题。只需遵循指南:

使用Vue CLI 3,可以使用vue create youProject创建一个新项目,并设置为手动配置它。然后,不要选择SPA选项。Vue将使用MPA方法创建一个不错的“开始”项目。之后,只需在vue.config.js上重复配置即可。


更新#1

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

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

创建的样板将是SPA。但是,请进行以下更改:

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

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

  • 将src中的App.vue和main.js复制并粘贴到新文件夹-主页等中。
  • 可以将格式化App.vue为该文件夹
  • 创建一个vue.config.js并进行如下设置:https ://cli.vuejs.org/config/#pages

下面,我有三个图像说明了这一点:

  • 第一:全新的应用
  • 第二:同一个应用程序,但我在上面进行了更改
  • 第三:此应用程序中的vue.config.js

新鲜的新应用 这个相同的应用程序,与我上面所做的更改 此应用程序中的vue.config.js

您无需创建pages文件夹,只需了解一下即可。

链接到GitHub:构建MPA应用

GO 2020.03.12

请注意将用户指向应该接受的答案。
在发布我的初始答案时,我不知道在VueJS中实际构建MPA的可能性。我的答案未解决所提出的问题,因此,我建议您看看PJ.Wanderson波纹管提供的答案,这应该是公认的答案

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

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>
  • Template: it contains all the html your page should display (this is where you put the html of your pages)
  • Script: it contains all JavaScript code that will be executed on the page/component
  • Style: it contains the CSS that will style that specific component/page

You can check this tutorial out for a quick-start Vue.js 2 Quickstart Tutorial 2017

It explains vue.js project structure and how the various files relate to each other

乐米亚 2020.03.12

一个简单的解决方案

  1. 将您的后端服务器更新为GET和/或POST
  2. axios.get / post(to_the_url)
  3. 服务回html(例如flask中的render_template)
  4. 您可以从response.request.responseURL中提取网址
  5. 现在设置window.location.href = response.request.responseURL

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android