如何使用 Vue.js 制作 MPA？ （或者这个项目应该是一个SPA？）

Posted 2023-02-22

【中文标题】如何使用 Vue.js 制作 MPA？ （或者这个项目应该是一个SPA？）

【英文标题】：How can I use Vue.js to make a MPA? (Or should this project be a SPA?)

【发布时间】：2020-05-26 18:56:12

【问题描述】：

我刚刚学习了 Vue，正在尝试找出构建这个项目的最佳方式。

要求：

大约 6 页的基本 MPA（传统站点）。这将是静态信息。 需要有一个登录部分，客户将通过表单传输数据。付款也将在这里进行，因此需要安全。

我的问题是我应该如何在这里使用 Vue？ （我已经使用 VueCLI 搭建了项目）

我应该：

A) 将它用于某些组件（导航栏、按钮、表单等）并保持结构传统？在这种情况下，我将如何构建用户仪表板以提交表单信息 - 就像一个新页面一样？

B) 还是我应该将整个网站构建为 SPA 并在点击时加载新的“页面”信息？这对于登录部分会更容易吗？

阅读本文可能会清楚的一点是，我不太了解该网站将如何识别用户并处理登录。如果将其构建为 SPA，这会更容易吗？ （更安全？）

（另外，我正在使用这个网站自学前端开发，特别想了解更多关于构建 SPA 的信息 - 所以我意识到我可以使用网络编辑器或更简单的解决方案，但想学习如何做很多都是从“零”开始的）

【问题讨论】：

您可能会发现这很有用***.com/questions/51692018/…

【参考方案1】：

根据您的描述，这完全取决于您。 SPA 或 MPA 都可以正常工作，并且根据要求，两者都是完全合理的。

您以前使用过 Vue-router 吗？ SPA 不需要向用户显示为单个页面。它们仍然可以用作具有不同路由、页面文件、权限等的 MPA。

如果您希望使用这个项目来自学前端 Web 开发并且知道您对学习 SPA 有特别的兴趣，我想这就是您的答案。

我会使用 SPA 并设置 vue-router 来管理您的路线和页面。

【讨论】：

刚刚阅读了 vue 路由器文档，这看起来就像是一张票，谢谢 Air！

@Phil 没问题！