将后端和前端开发与 Laravel、Patternlab、Atomic Design 和 Vue.js 相结合

Question

我打算用这两个框架启动一个新项目（我喜欢）：

• Laravel 5
• Vue.js

前端开发人员准备 HTML 的原子设计，由 patternlab.io 生成。

现在我正在研究如何集成 patternlab.io 项目，而不必重写刀片模板中的所有元素。

我发现了一些使用 TwigBridge、Laratash Laravel 扩展结合 Patternlab 和 Laravel 的实现。

但我有一些想法：

• 刀片模板中有：逻辑、条件、循环……如果我将patternlab 和laravel 结合起来，那么我需要将所有这些都放在patternlab 项目中。
• 由于使用了vue.js，我还需要将这些标签添加到patternlab 模板中

所以我认为将patternlab.io模板集成到laravel项目中并不是最好的选择。

我的想法是：

• 前端 DEV 使用 patternlab 创建模板
• Laravel 自动生成并导入在 patternlab 中生成的 CSS 样式表
• 后端开发人员在刀片模板中手动复制patternlab - molecules 并添加自己的逻辑
• 如果前端开发人员对 CSS 进行了更改，那很好 - 我们将毫无问题地运行；在重新运行 laravel gulp 进程以更新 css 文件后，我们有了新的更新。
• 如果前端开发人员对 html 结构进行了一些更改，我们需要手动调整它们。

有没有更好的结合原子设计、Vuejs 和 Laravel 的解决方案？您如何在 CMS 中部署原子设计？

Answer 1

在我们创建的最后三个 Vue/Laravel 项目中，我们已经停止使用 PHP 作为渲染引擎，而只使用 Vue。 Laravel 仍然是一个非常棒的框架，可以以干净的可测试方式编写业务逻辑和 API ——但我们决定不再使用刀片。

您在尝试使用 PHP 后端创建 JS 呈现的应用程序时遇到的典型问题是缺少服务器端呈现。为了解决这个问题，我求助于 Vue 社区之外的一个新项目，Nuxt.js（我与他们没有任何关系，只是一个快乐的开发人员）。 Nuxt 让您可以编写 vue 组件并让它们在服务器端呈现，并在初始页面加载后在浏览器中呈现。

这使我们能够将所有渲染职责与 Laravel 完全分离，并将其保存在一个位置，因此无需使用刀片和 Vue——​​这都是 Vue。

唯一的缺点是您需要 2 个服务器 Node.js 和 PHP。