不前后端分离写 VUE，页面是不是会有多个 createApp 行为？

最近在尝试写 VUE，因为旧项目无法做到前后端分离，依旧是基于后端渲染模板模式。

一般项目，会分 页眉、侧栏，内容和页脚。在后端来说，这几块拆分好，然后用 JQ 去写一套逻辑即可。

我尝试用 VUE 去编写，VUE 要求在 createApp({...数据逻辑..}) 中就要声明好了。如果我用到 element UI 的布局划分，

//先注册页眉 header = Vue.createApp({..逻辑和组件..}).use('ElementPlus').mount('#header'); //在注册侧栏 sidebar = Vue.createApp({..逻辑和组件..}).use('ElementPlus').mount('#sidebar'); //最后注册布局 app = Vue.createApp({..逻辑和组件..}).use('ElementPlus').mount('#app'); 

这是其中一个解决办法，还有另外一种，组件

//在页眉文件 header.php 声明 <script> const app = Vue.createApp({}); app.use(ElementPlus); app.component('header', {}) </script> //sidebar.php 侧栏 <script> app.component('sidebar', {}) </script> //content.php 内容 <script> app.component('sidebar', {}) </script> //footer.php 页脚 <script> app.mount("#app"); </script> 

感觉很别扭，因为我要将后端的模板变量，转换为 Javascript 的标量，数组或对象。

不知道有没有后端有其他更优雅的解决办法呢？