quark h5 学习

入口文件 main.js

permission.js   // 权限控制

mUtils.js  //localstorage cookie 

config  //公共配置

filters  //过滤器

AES  //加密解密

api  //接口

element-ui

vue-clipboard2 //剪切板

goBeforeLoginUrl 登录后的跳转方法

---

路由 router.js

layout 主页面

     home页面 

           page-list   我的作品页面

           my-template  我的模版页面

           page-data  我的数据页面

           page-data-detail

           template-list 创意模版

    edit 编辑页面

login 登录页面

---

store 全局管理

user 用户权限相关的管理

edit 编辑相关的管理

    lodash 降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单

        cloneDeep 深拷贝

        merge   递归合并

    DataModel > editorProjectConfig 一些要编辑配置的属性

    state：

        projectData   // 当前编辑器编辑工程项目数据

        activePageUUID   // 当前正在编辑的页面uuid

        activeElementUUID    // 画板中选中的元素uuid

        historyCache  // 历史操作数据用于undo redo

        currentHistoryIndex  // redo undo 指针

         activeAttrEditCollapse: ['1']   //折叠展开

  

---

DataModel

    elementConfig    // 元素配置信息字段

    pageConfig   // 页面配置信息字段

    projectConfig  // 项目配置信息字段

    getElementConfig  //获取元素配置方法

    getPageConfig   //获取页面配置方法

    getProjectConfig   //获取项目配置方法  

---

页面

我的作品页面

我的模版页面

编辑页面

    组件列表

   页面管理

---

login 登录页

userModel 登录相关的方法

loginBackground 背景

element-ui 的一些组件

登录/注册，成功跳转

---

edit 编辑页面

   页面内容

     1. 左侧导航（组件列表，页面管理，模版库）

     2. 组件列表（基础组件，表单组件，功能组件，业务组件 ele-config里有详细列表）

     点击其中一个组件，

        getComponentProps 根据elname获取组件默认props数据

        vuex 调用addElement方法，在数据上添加一个组件

     3. 页面编辑区域（上面是页面上的一些功能按钮，下面是编辑器区域editorPan）

     4. 属性编辑区（属性，事件，动画，JS脚本，页面设置）

     5. 预览页面

页面逻辑

   初始化

      进入页面，

      先调用vuex的初始化项目方法，深拷贝默认的项目数据，

      把默认页面数据新加上uuid，并把页面数据加到项目数据的页面数据中，

      设置更新当前活动的uuid为第一个页面的uuid，

      获取路由参数中的id，调用初始化项目方法，用id对应的页面将页面重绘。（这里是不是后台给了初始化数据）

点击保存

接口提交数据