laravel - 使用 Laravel、Patternlab、Atomic Design 和 Vue.js 结合后端和前端开发

Question

我打算用这两个框架启动一个新项目(我喜欢):

• 拉拉维尔 5
• Vue.js

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

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

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

但我有一些想法:

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

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

我的想法是:

• 前端开发人员使用 patternlab 创建模板
• Laravel 自动生成并导入 patternlab 生成的 CSS 样式表
• 后端开发人员在 Blade 模板中手动复制 patternlab - molecules 并添加他们自己的逻辑
• 如果前端开发人员对 CSS 进行了更改，那没关系 - 我们不会遇到任何问题；重新运行 laravel gulp 进程以更新 css 文件后，我们有了新的更新。
• 如果前端开发人员对 html 结构进行了一些更改，我们需要手动调整它们。

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

Answer 1

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

通常，您在尝试使用 PHP 后端创建 JS 呈现的应用程序时遇到的问题是缺少服务器端呈现。为了解决这个问题，我转向了 Vue 社区的一个新项目，Nuxt.js (我与他们没有任何关系，只是一个快乐的开发者)。 Nuxt 允许您编写 vue 组件，并让它们在服务器端呈现，并在初始页面加载后在浏览器中呈现。

这使我们能够将所有渲染责任从 Laravel 中完全分离出来，并将其保存在一个位置，因此无需使用 blade 和 Vue —— 一切都是 Vue。

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