这2天没有接口，于是学习了下mock用法，2天归纳出来的自己学习掌握的经验，也解决了mock再语法上对数组的嵌套不支持路径语法的问题。 vue+mock

/**
 * @AUTHOR  KYOL：luowei 
 * @description useing development-data to write components for process/
 * 
 */
 import Mock from 'mockjs'
 import Vue from 'vue'
 window.kyolMock = {}
  const moduleFiles = require.context('.', true, /\.js$/)
  const files = moduleFiles.keys().reduce( (p, n ,i) => {
     const file = moduleFiles(n)?.default || moduleFiles(n)
      return Object.assign(p, file)
  },{})
 
  Object.defineProperty(files,'keys',{
      value: Object.keys(files),
      enumerable :false,
      configurable: false,
      writable: false
  })
 
 /**
  * deep tree 扩展语法的缺陷,实现属性定位赋值， 
  * 
  */
 const deepTree = function(tree, parent = []) {
     const keys = Object.keys(tree)
     const att = str => str.match(/\/\w+/g)?.map?.(key=>key.slice(1)) || []
     const getValue = (obj,arr, defaultValue) => arr?.reduce?.( (p,n)=> p?.[n] || defaultValue,obj) 
     keys.forEach( key => {
         const value = tree[key]
         if(Array.isArray(value)){
             const _parent = [...parent]
             value.forEach( childKey => deepTree(childKey, _parent.concat(tree)))
         } else if(typeof(value) ===  'string') {
             if(value.startsWith('@.') || (value.startsWith('@') && value.length > 1)){
                 const _attKey = att(value)
                 const length = value.match(/\.\.\//g)?.length || 0
                 if(value.includes('../')){
                     tree[key] = getValue(parent.slice(-length)[0], _attKey, value) 
                 } else if(value.includes('./')){
                     tree[key] = getValue(tree, _attKey,value) 
                 } else if(value.startsWith('@') ){
                     const propertyKeys = value.replace('@','').split('/')
                     tree[key] =  getValue(parent[0], propertyKeys, value) 
                 }
             }
         }
     })
 }
 
 const getNewData = function (path, type) {
     const template = typeof(type) === 'object' && !Array.isArray(type) ?  type : files[path] 
     const data = Mock.mock(template || {code:-1,data:{},message:'请求地址无效'})
     const code = data.code || 200, message = data.message || '请求成功'
     Object.assign(data, {code, message})
     deepTree(data)
     typeof(type) === 'function' && type(data)
     kyolMock[path] = data
     return data
 }
 Vue.prototype.$mock = function(key, type){
     return  Promise.resolve(getNewData( key, type))
 }
 Vue.prototype.$mock.setTip = ''
 
 /*express 拦截并没有什么卵用,直接动态响应，更加方便调研查看*/
 export default function (app, server, compiler){
     console.log(app, server, compiler,'express')
     const mockList = files.keys
     try{
         let esc = false
         mockList.forEach( path => {
             if(esc) throw('mock success')
             app.use(path,(req, res , next) =>{
                 esc = req.path.includes(path)
                 const {0:type, 1:url } = path.split(' ')
                 const data = Mock.mock(url,type,files[path])
                 res.send(data)
                 if(!esc) next()
             })
         })
     }catch( message ){
         console.log(message)
     }
 }
 
 /**
  * 个人代码风格
  * @desc： 1：和业务无关的功能、开关 数据转化、代码块独立成函数。
  * 2：也业务有关初始、结束，入口，出口，代码块独立成函数。
  * 3：组件与开发者关心的数据作为输入输出，其他中间件，不作为组件的抛出产物。
  * 4：样式规范：所有组件有一个和组件名一致的class,和一个位移class。并列，
  * 5：子组件与父亲组件层级关系，用parent-child,最终功能快child-tag,展示片段为hild-tag_片段名
  * 6：递归和尾递归的最大区别在于，尾递归没有内部参数定义，减少了闭包的形成。
  * 7：
  */

  /**MOCK语法 */
  //template
  let url,type,template;
  Mock.mock( [url,type],template)
  /**语法规则 */
  template =  {
        // 返回长度内字符串
        'label|2': '',               //    随机字符串长度为2
        'label2|2-5': '2',            //    重复次数 '222'
        'label3':'jskajsd',             //    固定字符
        'arrat|1':['a','b','c'],     // 返回重复数组的长度 a | b | c ,随机返回数组中的字符
        'arrat2|+1':['a','b','c'],     // 返回重复数组的长度 a -> b -> c ,每次顺序获取组中的字符

        // 返回数字
        'number|1-100' : 2,          // 返回1-100的数字  跪着是 value 是一个数字
        'number2|+1' : 2,             // value 是一个数字，以value的初始值开始每次迭加 1
        "number3|1-100.1-10": 1,      // value 是数字，每次返回1-100之间且 1-0位小数

        // 返回数组
        'arrat|2':['a','b','c'],     // 返回重复数组的长度 ['a','b','c','a','b','c']
        'arrat|2-10':['a','b','c'],   // 重复次数 返回长度2-10之间的，
        
        // 返回对象
        "object|2": {                  // value 是对象，返回随机2个属性  2-5 随机2-5个属性
            "310000": "上海市",
            "320000": "江苏省",
            "330000": "浙江省",
            "340000": "安徽省"
          },
        //  Function 函数模式获取当前对象this
        'funName': function() {         // value 是函数，必须返回值，内部this 指向当前对象 template 
            return this.foo
        },
        // 定位属性
        path : '@/number',               // 返回template.number 的属性值
        pathObject:{ 
            path2 : '../path'            // 返回相对定位 上一层对象 path 属性
        },
        /**数据占位符定义  @变量(num),@变量(min,max)*/
        'antKey':`
                 @boolean(num),
                 @integer(min,max) | min,
                 @character("lower")    @character("upper")   返回小写、大写字符
                 @string()   @string(5)  @string("upper",5,10)  返回字符串
                 @date("yyyy-MM-dd")                           返回日期格式
                 @time("HH:mm:ss")                              返回时间
                 @datetime("yyyy-MM-dd A HH:mm:ss")             返回完整时间
                 @color                                         返回颜色  #ffee44
                 @rgb()                                         返回RGB
               
                 英文
                 @paragraph
                 @sentence  @sentence() @sentence(5)   @sentence(2,8)               返回英文行数范围
                 @word @word(5) @word(2,8)                      返回字母个数范围
                 @name   @title
                
                 中文
                 @cparagraph  @cparagraph(3) @cparagraph(1,4)  返回汉字行数    C 标识为中文
                 @csentence  csentence(5) csentence(2, 7)       返回汉字个数范围
                 @cword @cword(5) @cword(2,8)  
                 @cname   @ctitle


                地理位置
                @@province 
                @city() @city(true)                             返回城市，为真 则返回上一级关系
                @county() @county(true)
                
                网络常用
                @id() @web() @emal()

                路径 ## 只能使用在对象属性和属性上，不能使用在数组上
                绝对路径 @/wen                                  // 返回从template开始的this对象   
                相对路径 @../  @./                              // 返回相对位置的路径，也只能使
                自定义 相对路，绝对路径再数组中的判断
                @/

                函数    ## 只能使用在一级属性数
                function(context){ return this.Key }            // 是从template对应的this.开始
                 `

  }


  /**模板例子*/
  export default {
    // 走马灯+快捷设置
    'get /carousel/kyol': {
            data:[ {
                title:'系统模板',
                key:1,
                children:[
                        {
                            'label': '报表中心',
                            'key':1,
                            'parentKey':'@../key',         // 自定义模板语法替换
                            'disabled': false,
                            'checked': true,
                            'coruleCodede':'A000006',
                            'path':'@/data/0/title',        // 自定义模板语法替换
                        },
                        {
                            'label': '项目平台',
                            'key':2,
                            'parentKey': '@../key',       // 自定义模板语法替换
                            'disabled': false,
                            'checked': true,
                            'path':'/home',    
                            'ruleCode':'A000619'
                        },
                ]
        }]
    },
    // 设置面板
    'get /sortCrad/defaultObject':{
        'data':[
            {
                'title':'资源面板：',
                'key': 1,
                'checked': false,
                'children|3':[
                    {
                        'label|+1': ['全国布局概览','资源去化概览','租约即将到期资源分析'],
                        'parentKey': '@../key',
                        'key|+1': 1,
                        'disabled': false,
                        'checked': false,
                        'code|+1':['A0478','A0479','A0480']
                    }
                ]
            },
            {
                'title':'客户面板：',
                'key': 2,
                'checked': false,
                'children|4':[
                    {
                        'label|+1': ['客户转化率分析','客户来源渠道分析','客户产业结构分析','客户产值贡献、税收达成率'],
                        'parentKey': '@../key' ,
                        'key|+1':1,
                        'disabled': false,
                        'checked': false,
                        'code|+1':['A0481','A0482','A0483','A0484']

                    }
                ]
            },
            {
                'title':'租赁面板：',
                'key': 3,
                'checked': false,
                'children|2':[
                    {
                        'label|+1': ['租赁签约统计','到期合同与续租分析'],
                        'parentKey': '@../key' ,
                        'key|+1':1,
                        'disabled': false,
                        'checked': false,
                        'code|+1':['A0485','A0486']
                    }
                ]
            },
            {
                'title':'销售面板：',
                'key': 4,
                'checked': false,
                'children':[
                    {
                        'label': '销售签约统计',
                        'parentKey': '@../key' ,
                        'key':1,
                        'disabled': false,
                        'checked': false,
                        'code':'A0487'

                    }
                ]
            },          
            {
                'title':'财务面板：',
                'key': 5,
                'checked': false,
                'children|2':[
                    {
                        'label|+1': ['财务应收与回款统计','逾期欠款与账龄分析'],
                        'parentKey': '@../key' ,
                        'key|+1':1,
                        'disabled': false,
                        'checked': false,
                        'code|+1':['A0488','A0488']

                    }
                ]
            },
        ]
    }
}