我打算用这两个框架启动一个新项目(我喜欢):
- 拉拉维尔 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 中部署原子设计?
最佳答案
在我们创建的最后三个 Vue/Laravel 项目中,我们已经完全停止使用 PHP 作为渲染引擎,而只使用 Vue。 Laravel 仍然是一个非常棒的框架,可以以干净可测试的方式编写业务逻辑和 API——但我们决定不再使用 Blade。
通常,您在尝试使用 PHP 后端创建 JS 呈现的应用程序时遇到的问题是缺少服务器端呈现。为了解决这个问题,我转向了 Vue 社区的一个新项目,Nuxt.js (我与他们没有任何关系,只是一个快乐的开发者)。 Nuxt 允许您编写 vue 组件,并让它们在服务器端呈现,并在初始页面加载后在浏览器中呈现。
这使我们能够将所有渲染责任从 Laravel 中完全分离出来,并将其保存在一个位置,因此无需使用 blade 和 Vue —— 一切都是 Vue。
唯一的缺点是您需要 2 台服务器 Node.js 和 PHP。
关于laravel - 使用 Laravel、Patternlab、Atomic Design 和 Vue.js 结合后端和前端开发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43529418/