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

[Felldeadbird]

最近在尝试写 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 的标量，数组或对象。

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

[Roxk]

后端渲染时，把前端所需要的数据挂在一个全局变量上(比如 window.__pagedata_header={data:1};window.__pagedata_sidebar={data:1})，然后前端在一个 script 里去拿 window.__pagedata_header 和 window.__pagedata_sidebar 塞进 createApp 中，不知道是否可以？

[zhyt0520]

建议参考 inertiajs
https://inertiajs.com/

[echowuhao]

可以考虑 vue 的弟弟 https://github.com/alpinejs/alpine

[xiaomingVTEX]

可以考虑 reactjs https://zh-hans.reactjs.org/docs/add-react-to-a-website.html

[IvanLi127]

我觉得无法分离的，还想直接上 vue，直接把页眉页脚内容什么的全丢到一个 div 下面 然后 vue 挂这个 div 就好了。。。另外有多个 vue 实例也不是什么问题吧

[rykinia]

用 vue 的组件是正确的方式，但应该写一个 main-page.vue ，然后用 vue 自己引入 component/header.vue, component/siderbar.vue 等组件，页面完全由 vue 管理，后端只负责提供数据。而不是依然用后端来分别 include.

[rykinia]

@rykinia 突然想起来这是前端打包的写法，无视吧 -.-

[xiaoyiyu]

不用吧，前后端不分离但是可以分离 js 文件，js 文件写在 php 之外。如果有后端生成的 js 变量，定义在 php 的 script 标签里，分离的 js 放在最后引入就可以吧

[Felldeadbird]

@xiaoyiyu 这个做法考虑过。要提前写好总提的 JS 方法，不然其他人接手维护，改动起来很容易出现 BUG 。

[Rache1]

@zhyt0520 感觉这种开发方式很奇怪 😂 虽然现在在用类似的

[TomVista]

<div id='app'>
<template />
</div>

<script>

const data = %data%

new Vue({
el: "#app",
data,
methods:{}
}
</script>