引入
终端
pnpm i @zuojinpu/page-designer
查看页面设计器包中的package.json文件，确保项目中安装使用peerDependencies配置项中的所有依赖！
peerDependencies中核心依赖如下：
vueaxioselement-plus@element-plus/icons-vueecharts
main.ts
import { createApp } from 'vue'
import pageDesigner from '@zuojinpu/page-designer'
createApp().use(pageDesigner)
App.vue
<template>
{/* 设计器 */}
<PageDesigner :layoutName="layoutName" :layoutMap="layoutMap" @submit="submit" @back="back" />
{/* 展示器 */}
<PageDesigner :layout="layout" />
</template>
<script setup>
import { useRouter } from 'vue-router'
import pageDesigner from '@zuojinpu/page-designer'
// 页面标题
const layoutName = ref('我是页面标题')
//页面数据，格式：submit方法中获取到的obj.data格式
const layoutMap = ref({})
pageDesigner.setDesignerConfig({
// 全局配置
globalConfig: {
// 请求头
headers: {
'token': 'token value'
},
// 文件上传参数
uploadFileParameter: 'file',
// 文件上传接口地址
uploadURL: '/api/upload',
},
// 路由控制器
vueRouter: useRouter(),
// 可跳转页面
pageLinks: [
{
value: '/home',
label: '首页'
},
{
value: '/system',
label: '系统管理',
children: [
{
value: '/system/user',
label: '用户管理'
}
]
}
],
// 数据源
dataLinks: [
{
id: uuidv4(),
value: '/mockapi/carousel',
label: '轮播管理',
children: [
{
id: uuidv4(),
value: '/mockapi/carousel/data',
label: '轮播数据',
fields: [
{
label: '图片',
property: 'image'
}
]
}
]
}
]
})
/**
* @function: submit
* @description: 点击header区域发布或者保存按钮
* @param: obj.type 按钮类型，publish=发布；save=保存
* @param: obj.data 页面数据
*/
function submit (obj) {
// ...
}
/**
* @function: back
* @description: 点击header区域返回按钮
*/
function back () {
// ...
}
</script>