Vue.js CLI 中的多个页面 [英] multiple pages in Vue.js CLI

问题描述

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

I'm having trouble figuring out how to have multiple pages in a Vue CLI project. Right now I have my home page with a few components and I want to create another page but I do not know how to do that. Am I supposed to create multiple html files where the index.html by default is? In a simple file structure with css js img folder and html files as pages I know that creating another html file means making another page. But I don't understand how this works with Vue CLI project.

我在 Vue 文档中看到了诸如 vue-router 和页面"之类的东西，但我不太了解它们.我的选择是什么?有没有详细解释的指南，因为我找不到任何指南，更不用说详细了.如果能帮到你会很开心！谢谢！

I saw stuff like vue-router and "pages" in Vue documentation but I do not understand them very well. What are my alternatives? Is there a guide that explains that in detail, because I wasn't able to find any, let alone detailed. Would be very happy if you could help! Thank you!

推荐答案

注意指出用户应该接受的答案
在发布我最初的答案时，我不知道在 VueJS 中实际构建 MPA 的可能性.我的回答没有解决所提出的问题，因此我建议看看 PJ.Wanderson 提供的答案，应该是公认的答案

初始答案
Vue.js 项目是 SPA(单页应用程序).您在整个项目中只有一个 .html 文件，即您提到的 index.html 文件.您要创建的页面"，在 vue.js 中被称为组件.它们将插入 index.html 文件并在浏览器中呈现.一个 vue.js 组件包括 3 个部分:

Inital Answer
Vue.js projects are SPAs(single page applications). You only have one .html file in the entire project which is the index.html file you mentioned. The "pages" you want to create, in vue.js are referred to as components. They will be plugged into the index.html file and rendered in the browser. A vue.js component comprises 3 parts:

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

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

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

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

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

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

这篇关于Vue.js CLI 中的多个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！