如何处理具有多种布局的Vue“el”指针（Laravel MPA）

Question

所以我有一个我构建的 laravel 应用程序，并且使用 Laravel 而不使用 Vue.js。现在，在了解 vue.js 及其轻量级 + 众多附加功能以改善用户体验后，我决定包含它并将我的应用程序重新构建为具有更好反应性的组件。

唯一的问题是，通过我的少量研究，我发现 resources/js/app.js 中的主要 vue 元素指向 views/layouts/app.blade.php 中的 #app 元素，这很好如果我有一个从那里开始的 SPA 或 MPA。

但是，在我的实现中，我的应用程序的后端和用户部分都有不同的布局文件，我不知道如何去做（将 vue 对象指向哪个元素）。

如果可能的话，这就是我想要的。我希望 commons.js 包含我所有的常用组件和导入，也许还有一个 [page].js 用于我需要更多的页面。

提前致谢！

Answer 1

我想出了如何处理这个问题。

在 app.js 中创建的 Vue 实例不必是您唯一的实例。在 MPA 中，您最喜欢有多个 vue 实例，可能在每页上。为了保持我的代码干净，我在 app.js 中保留了整个应用程序通用的依赖项。

对于我的门户，每个门户都有一个 commons.js，其中包含特定于我的应用程序管理的依赖项，因此当用户浏览我的网站时不需要加载。我设置了与 webpack 捆绑并包含在所有门户页面中。

此外，每个页面都有一个 page.js，它也被捆绑并仅包含页面特定的依赖项（组件等）和每个页面的 vue 实例。

通过使用这种架构，我将需要加载的 JS 减少到只需要在门户页面和用户主应用程序上加载。

希望这对某人有所帮助！编码愉快。