这里使用的是 vue-cli 的webpack打包工具

首先准备好我们符合递归条件的数据

./build/mack/data.json

[  {    "id": 1,    "name": "第一层",    "children": [      {        "name": "第二层"      },      {        "name": "第二层"      },      {        "name": "第二层"      }    ]  },  {    "id": 1,    "name": "第一层",    "children": [      {        "name": "第二层"      },      {        "name": "第二层",        "children": [          {            "name": "第三层"          },          {            "name": "第三层"          },          {            "name": "第三层"          }        ]      },      {        "name": "第二层",        "children": [          {            "name": "第三层"          },          {            "name": "第三层"          },          {            "name": "第三层",            "children": [              {                "name": "第四层"              },              {                "name": "第四层"              },              {                "name": "第四层",                "children": [                  {                    "name": "第五层"                  },                  {                    "name": "第五层"                  },                  {                    "name": "第五层"                  }                ]              }            ]          }        ]      }    ]  }]复制代码

创建接口

./webpack.dev.conf.js

devServer: {    ...    before: require('./mock/index')  },复制代码

./mock/index

const data = require('./data')module.exports = function (app) {  app.get('/data', (require, result) => {    result.send(data)  })}复制代码

简单封装 fetch工具 ./src/api.js

export async function request (url) {  return fetch(url).then(res => {    return res.json()  }).then(data => data)}复制代码

封装组建

./src/components/accordion.vue

    复制代码

调用组建

./src/components/HelloWorld.vue

    复制代码

项目地址：