• 巅云前端vue3双向数据绑定可视化布局系统操作手册V4.0
    作者:admin | 时间:2021-06-22 09:28:40

    巅云前端双向可视化布局系统操作手册V4.0

     

    操作目录

    1. 软件开发背景 P02

    2. 软件功能说明 P03

    3. 软件安装使用 P04

    4. 功能面板展示 P05

    5. 文件目录结构 P09

    6. 特有数据结构 P10



    l 软件开发背景

    网页设计是一个相对复杂的过程。需要美工PS出图、切片,HTML前端设计师布局(DIV+CSS),JS代码开发编写,一个完整的网页就需要较长的时间才能完成开发。

     

    这时如果我们有一款可视化的布局器,将常用的一些网页切成功能块(如文字块,图片块,新闻列表,产品列块)然后据当前网页需求将一些块拼图式、拖放式摆放到任意位置??齑闯鲆桓鐾忱?。且实现这些块的整体样式及块内部HTML子元素自由风格定义。


    巅云前端可视化布局系统,就是一个实现了完全自定义的、所见即所得的一个非代码式前端开发工具。大大提高网页设计速度。

      

    软件功能说明:

    巅云前端双向可视化布局系统V4.0功能介绍:

     

    技术实现

    1、系统采用VUE双向数据绑定机制及NODE.JS打包

    2、tinymce可视化文字编辑

    3、Ant-design-vue表单元素

    4、DIV自由拖拽,独创网页定位标尺线,DIV移动辅助线参考线。

    5、实现了拖放式增加DIV,右键面板、

    6、tinymce即时修改DIV内容,设置区域样式,设置??榧安考?/p>

    7、高要扩展性:DIV类型可通过接口动态载入,独创动态设置??槟诓磕男┰乜梢陨柚醚?。

    8、快捷方式:??橛懈粗?,删除功能

    9、高安全:可随时撤销恢复。

    10、??槎柚?、不同类型??榈乃接猩柚孟?,风格调用等灵活扩展实现方案。

    11、实现了iframe消息传递更好的响应式布局方案,多端适配。

     

     软件安装:

     

    1、需系统安装node.js,CD到系统目录分为innerdemo(内层),outerdemo(iframe外层)

    2、内外层分别运行:npm install及npm run serve及可。

    3、访问方式:http://localhost:80808081端口。

      

    黑白双风格功能界面截图:


     

     

     

     

     

     




    系统目录结构:

    Inner /iframe内层目录/文件

    说明

    dist

    打包后生成目录

    node_modules

    Vue类组件安装库

    public

    静态资源

    src

    核心目录

    -components

    Module.vue ??楣δ苁迪?/span>

    ModuleBox.vue 区域???/span>

    功能组件存

     

    -assets

    静态资源

    -App.vue

    主???/span>


    Outer/iframe外层目录/文件

    说明

    dist

    打包后生成目录

    node_modules

    Vue类组件安装库

    public

    静态资源

    src

    核心目录

    -components

    BoxSet.vue ??榍蜃榧?/span>

    Head.vue   框架顶部组件

    ModalImg.vue 框架弹窗组件

    Module.vue 添加DIV面板

    Rclick.vue 右键功能

    Ruler.vue  标尺

    Setting.vue ??榍蛏柚?/span>

    Spin.vue 加载入动画

    功能组件外层指令

     

    -assets

    静态资源

    -App.vue

    主???/span>



    特有数据结构:

     



    文章内容