Laravel 扩展包开发用哪种前端框架合适?在扩展包内如何发布前端组件?
起因
我去年在尝试着做一个偏研发工具方向的工作流编辑器。其实原本就像奔着 Laravel 扩展包的方向进行开发。但我对自己的前端能力不是很自信,所以想先按照网站的开发模式先来学习下不熟悉的前端框架。
于是目前的半成品长这个样子:
虽然简陋,但已经完成了基础的设计目标。
扩展包问题
我之前有一些扩展包开发经验,但都是基于简单的功能或API接口开发,我们的前端工程师并没有采用扩展包模式开发。现在是做我自己的程序了,最具挑战的就是前端技术。这里有些问题想问大家:
- 做这种带页面的扩展包,应该选用哪种前端框架?
livewire
?Insertia
? 还是直接用Vue
? - 如果选用了这些前端框架,如果以后使用该扩展包的程序采用不同的前端框架该如何兼容扩展包中的前端组件?
吐槽一下目前选用的技术栈
服务端采用的是 laravel 10 + sail
前端框架用的是 Livewire 3 + tailwind css 3 + vite 4 + mary-ui + gojs
服务端自不用说,这几个前端框架可以说都是头一次用,所以也在上面花费了大量的时间(感觉还没用明白)。
使用 Livewire
就意味着页面内容和前端资源在开发环境采用不同的端口进行输出,当我想引入 monaco-editor
做 JSON
和 YAML
格式编辑器的时候,出现引入其 webworker
产生的同源问题,我能想到的只有再加个反向代理按照路径将请求代理到不同的端口。
使用 Livewire
和 tailwind css
的另一个问题是缺少前端组件库,最终选择了 mary-ui
(扩展自 DaisyUI), 使用过程中发现组件还是太少。
gojs
的好处就是定制能力强,但仅提供了有限的 UI 组件用来构建画板和底纹,图型基本上都要靠自己去选并配置样式。我也没有 UI 方面的造诣,就造成了自己看着不好看但又说不出该怎么改的困境。
之后想做的尝试
- 进行插件化改造:将其改造成一个 laravel 的插件;
- 更换前端框架:现在还没想好是直接换
Vue + ElementPlus
还是Insertia
,如果是从 UI 组件上看,我更倾向于前者; - 进行 UI 优化:主要是图形方面的 UI 进行优化,但脑子里没有什么方向,大家如果有可参考的项目可以发一下,我借鉴一下。
推荐文章: