import{a1 as r,d,I as l,N as i,a as h,c as p,ai as u}from"./index-ea7eee8a.js";const c=d({components:{},setup(n){const o=[],e=l({});return{toggleCode:a=>{const t="vdpv_"+a;e[t+"Height"]===0?e[t+"Height"]=(o[a].value?o[a].value.offsetHeight:0)||0:e[t+"Height"]=0},...i(e)}}});c.$vd={matter:{},toc:[{content:"如何快速开始",anchor:"如何快速开始",level:1},{content:"1.创建数据源",anchor:"1创建数据源",level:2},{content:"2.创建表单",anchor:"2创建表单",level:2},{content:"3.列表页设计",anchor:"3列表页设计",level:2},{content:"4.内容管理",anchor:"4内容管理",level:2},{content:"5.设计管理",anchor:"5设计管理",level:2},{content:"6.查看导出vue文件示例",anchor:"6查看导出vue文件示例",level:2}]};const v=c,f={class:"vuedoc"},_=u('<h1 id="如何快速开始" data-source-line="1"><a class="markdownIt-Anchor" href="#如何快速开始">#</a> 如何快速开始</h1><p data-source-line="2">快速开始正确步骤：</p><h2 id="1创建数据源" data-source-line="5"><a class="markdownIt-Anchor" href="#1创建数据源">#</a> 1.创建数据源</h2><p data-source-line="6">有了数据源，你才知道接下来的表单、列表等都需要有哪些数据库表字段，以及各字段的类型等相关信息。</p><p data-source-line="8"><a href="/#/design/dataSource">点击这里进入创建数据源</a></p><h2 id="2创建表单" data-source-line="10"><a class="markdownIt-Anchor" href="#2创建表单">#</a> 2.创建表单</h2><p data-source-line="12">首先对表单配置常用参数，选择前面创建的数据源。如果没有数据源时可根据后端同学提供的接口URL，配置好<code>接口数据事件</code>；</p><p data-source-line="14">然后呢就可以愉快的拖拽表单组件来进行设计了；</p><p data-source-line="16">最后将设计好的表单保存到服务端或是导出vue文件使用</p><h2 id="3列表页设计" data-source-line="18"><a class="markdownIt-Anchor" href="#3列表页设计">#</a> 3.列表页设计</h2><p data-source-line="20">完成表单设计后，通过表单提交的内容总得需要个列表展示出来吧；</p><p data-source-line="22">同样的先配置好数据列表配置；</p><p data-source-line="24">设置条件查询表单；</p><p data-source-line="26">添加新增和删除导出等等入口；</p><p data-source-line="28">最后将设计好的数据保存在服务端或导出vue文件使用</p><p data-source-line="30"><a href="/#/design/dataList">点击这里进入列表页设计</a></p><h2 id="4内容管理" data-source-line="32"><a class="markdownIt-Anchor" href="#4内容管理">#</a> 4.内容管理</h2><p data-source-line="33">从左侧导航展开内容管理，即可看到设计的列表页及表单提交上来的数据</p><h2 id="5设计管理" data-source-line="36"><a class="markdownIt-Anchor" href="#5设计管理">#</a> 5.设计管理</h2><p data-source-line="37">可从设计管理导航进入查看前面提交保存的表单、列表页等设计</p><h2 id="6查看导出vue文件示例" data-source-line="40"><a class="markdownIt-Anchor" href="#6查看导出vue文件示例">#</a> 6.查看导出vue文件示例</h2><p data-source-line="42">展开导航系统管理，子级用户管理、角色管理等等都是使用导出vue设计的方式实现</p>',22),m=[_];function g(n,o,e,s,a,t){return h(),p("div",f,m)}const I=r(v,[["render",g]]);export{I as default};