最近在尝试写 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 的标量,数组或对象。
不知道有没有后端有其他更优雅的解决办法呢?
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 中,不知道是否可以?
|
2
zhyt0520 2021-05-30 00:45:25 +08:00
建议参考 inertiajs
https://inertiajs.com/ |
3
echowuhao 2021-05-30 01:32:30 +08:00 1
可以考虑 vue 的弟弟 https://github.com/alpinejs/alpine
|
4
xiaomingVTEX 2021-05-30 01:37:49 +08:00 1
|
5
IvanLi127 2021-05-30 09:51:47 +08:00 via Android 1
我觉得无法分离的,还想直接上 vue,直接把页眉页脚内容什么的全丢到一个 div 下面 然后 vue 挂这个 div 就好了。。。另外有多个 vue 实例也不是什么问题吧
|
6
rykinia 2021-05-30 10:08:20 +08:00 1
用 vue 的组件是正确的方式,但应该写一个 main-page.vue ,然后用 vue 自己引入 component/header.vue, component/siderbar.vue 等组件,页面完全由 vue 管理,后端只负责提供数据。而不是依然用后端来分别 include.
|
8
xiaoyiyu 2021-05-30 22:11:33 +08:00 via iPhone 1
不用吧,前后端不分离但是可以分离 js 文件,js 文件写在 php 之外。如果有后端生成的 js 变量,定义在 php 的 script 标签里,分离的 js 放在最后引入就可以吧
|
9
Felldeadbird OP @xiaoyiyu 这个做法考虑过。要提前写好总提的 JS 方法,不然其他人接手维护,改动起来很容易出现 BUG 。
|
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> |