Laravel 中多个 Vue 实例/应用程序的最佳实践

Question

我想创建一个带有 Laravel Lumen 和 VueJS 的 Web 应用程序，其中 Laravel Lumen 用于 API，VueJS 用于 SPA。在应用程序中，我想要一个管理部分、一个小论坛和网站。我想在未来的项目中重复使用这个概念，在那里我可以轻松决定是否需要网站中的论坛或管理部分，或者是否可以像添加商店一样轻松扩展。

我的结构概念

我的想法是为 Lumen 项目中的不同部分制作三个独立的 vue 实例。目录结构的示例如下所示：

(lumen project)
  ??? app
  ??? node_modules
  ??? public
  ??? resources
  ?   ??? js
  ?   ?   ??? admin
  ?   ?   ?   ??? components
  ?   ?   ?   ??? router
  ?   ?   ?   ??? store
  ?   ?   ?   ??? views
  ?   ?   ?   ??? admin.js    // where I create a vue instance
  ?   ?   ??? forum
  ?   ?   ?   ??? components
  ?   ?   ?   ??? router
  ?   ?   ?   ??? store
  ?   ?   ?   ??? views
  ?   ?   ?   ??? forum.js    // where I create a vue instance
  ?   ?   ??? site
  ?   ?       ??? components
  ?   ?       ??? router
  ?   ?       ??? store
  ?   ?       ??? views
  ?   ?       ??? site.js     // where I create a vue instance
  ?   ??? sass
  ?   ?   ??? admin
  ?   ?   ??? forum
  ?   ?   ??? site
  ?   ??? views
  ??? routes
  ??? package.json
  ??? webpack.mix.js
  ...

使用 Laravel-mix，js/vue 和 sass 文件将分别编译为公共文件夹中的三个单独文件：

const mix = require('laravel-mix');

require('laravel-mix-alias');

mix.js('resources/js/site/site.js', 'public/js')
   .js('resources/js/admin/admin.js', 'public/js')
   .js('resources/js/forum/forum.js', 'public/js')
   .sass('resources/sass/site/site.scss', 'public/css')
   .sass('resources/sass/admin/admin.scss', 'public/css')
   .sass('resources/sass/forum/forum.scss', 'public/css')
   .setPublicPath('public');

mix.alias({
    '@': '/resources/js/site',
    '@admin': '/resources/js/admin',
    '@forum': '/resources/js/forum',
    '~': '/resources/sass/site',
    '~admin': '/resources/sass/admin',
    '~forum': '/resources/sass/forum'
});

然后在 (laravel) 流明路由和控制器中，将决定哪个 js、管理员、站点或论坛必须包含在流明视图中。所以每个部分都有自己的流明视图，比如admin.blade.php、site.blade.php和forum.blade.php。从那里开始，视图将在 Vue 中生成，Lumen 将用作 API。

我的问题

我想知道在我走得更远之前我是否朝着一个好的方向前进，这是一个好的做法吗？什么可以更好，或者什么应该完全不同？我认为另一种选择是完全分离所有内容并创建单独的存储库而不是一个，但我希望所有内容都作为一个产品。我正在寻找一个答案来解释什么是适合我的情况的最佳实践。

Answer 1

三年前尝试过类似的事情。我将分享我的经验，希望对您有所帮助：

即使一开始看起来不错，但在开发过程中您会发现您的 SPA 共享的代码并不像您最初想象的那么多。它们将会出现分歧，并且作为单一代码库将变得越来越难维护。

经过多次失败后，我已经达到了完美的设置：我已经确定我的管理SPA 是我每个项目都需要的。因此，它是我的 Lumen API 中包含的唯一一个，并且它是作为单个代码库构建和管理的。

营销/演示网站是一个完全不同的项目，仅 Vue，使用vue-cli创建。其他应用程序（如论坛）也是单独的项目。

从长远来看，这可以让您：

• 将管理模板与 API 一起维护（例如，我发现用户管理是我 80% 或我的 API 想要的东西，所以我的管理模板现在为用户提供 CRUD 操作）
• 从现代模板开始，而不是针对新 Web 应用程序的过时模板：例如，您可以将网站作为Nuxt 网站而不是 SPA Vue 应用程序。当然，您将连接到相同的 Lumen API。
• 您不会被迫为新项目使用相同的布局和 CSS 框架。
• 当您在项目之间发现重复的代码片段时，您可以轻松地将其添加到您的入门（模板）存储库中。删除它来编写更容易。

但是，如果您决定采用整体方法，我建议将文件sass与 SPA 一起移动，例如/resources/admin/js/components和/resources/admin/sass/base.scss.