V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Felldeadbird
V2EX  ›  Vue.js

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

  •  
  •   Felldeadbird · 2021-05-29 22:13:03 +08:00 · 2532 次点击
    这是一个创建于 444 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    11 条回复    2021-06-01 10:00:12 +08:00
    Roxk
        1
    Roxk  
       2021-05-29 23:12:37 +08:00   ❤️ 1
    后端渲染时,把前端所需要的数据挂在一个全局变量上(比如 window.__pagedata_header={data:1};window.__pagedata_sidebar={data:1}),然后前端在一个 script 里去拿 window.__pagedata_header 和 window.__pagedata_sidebar 塞进 createApp 中,不知道是否可以?
    zhyt0520
        2
    zhyt0520  
       2021-05-30 00:45:25 +08:00
    建议参考 inertiajs
    https://inertiajs.com/
    echowuhao
        3
    echowuhao  
       2021-05-30 01:32:30 +08:00   ❤️ 1
    可以考虑 vue 的弟弟 https://github.com/alpinejs/alpine
    xiaomingVTEX
        4
    xiaomingVTEX  
       2021-05-30 01:37:49 +08:00   ❤️ 1
    IvanLi127
        5
    IvanLi127  
       2021-05-30 09:51:47 +08:00 via Android   ❤️ 1
    我觉得无法分离的,还想直接上 vue,直接把页眉页脚内容什么的全丢到一个 div 下面 然后 vue 挂这个 div 就好了。。。另外有多个 vue 实例也不是什么问题吧
    rykinia
        6
    rykinia  
       2021-05-30 10:08:20 +08:00   ❤️ 1
    用 vue 的组件是正确的方式,但应该写一个 main-page.vue ,然后用 vue 自己引入 component/header.vue, component/siderbar.vue 等组件,页面完全由 vue 管理,后端只负责提供数据。而不是依然用后端来分别 include.
    rykinia
        7
    rykinia  
       2021-05-30 10:19:16 +08:00
    @rykinia 突然想起来这是前端打包的写法,无视吧 -.-
    xiaoyiyu
        8
    xiaoyiyu  
       2021-05-30 22:11:33 +08:00 via iPhone   ❤️ 1
    不用吧,前后端不分离但是可以分离 js 文件,js 文件写在 php 之外。如果有后端生成的 js 变量,定义在 php 的 script 标签里,分离的 js 放在最后引入就可以吧
    Felldeadbird
        9
    Felldeadbird  
    OP
       2021-05-30 22:28:50 +08:00
    @xiaoyiyu 这个做法考虑过。要提前写好总提的 JS 方法,不然其他人接手维护,改动起来很容易出现 BUG 。
    Rache1
        10
    Rache1  
       2021-05-31 09:25:22 +08:00
    @zhyt0520 感觉这种开发方式很奇怪 😂 虽然现在在用类似的
    TomVista
        11
    TomVista  
       2021-06-01 10:00:12 +08:00   ❤️ 1
    <div id='app'>
    <template />
    </div>

    <script>

    const data = %data%

    new Vue({
    el: "#app",
    data,
    methods:{}
    }
    </script>
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2534 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 15:31 · PVG 23:31 · LAX 08:31 · JFK 11:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.