vuejs工程中读取页面文件列表构建tab页面

　　vuejs工程中对于一些重复度较高的tab页面中，或者在需求改变情况下，新增或删减tab页面需要一个便利的方法。可通过读取项目工程指定目录的页面文件列表，结合vuejs的组件懒加载属性，即可方便的构建tab页面。

　　工程文件分布结构：

　　

　　QueryList.vue主页面代码：

　　

import QueryHeader from "./components/QueryHeader"

  let fs = require("fs")
  let path = require("path")
  let platforms = fs.readdirSync(path.join(__dirname, "./platforms"))
  var compts = {}
  compts["QueryHeader"] = QueryHeader
  var platformCompts = {}
  platforms.forEach((value, index) => {
    let platformCompName = value.replace(/.w+$/, "")
    platformCompts[platformCompName] = () => import(`./platforms/${platformCompName}`)
  })
  Object.assign(compts, platformCompts)

  export default {
    name: "QueryList",
    components: compts,
    data() {
      return {
        activeName: "",
        platformsList: []
      }
    },
    mounted() {
      this.activeName = Object.keys(platformCompts)[0]
      for (let [key, value] of Object.entries(platformCompts)) {
        value().then(res => {
          this.platformsList.push({
            label: res.default.cnName,
            name: res.default.name,
            comp: value
          })
        })
      }
    }
  }

　　path.join(__dirname)获取到当前文件所在目录地址。通过fs.readdirSync方法同步读取到指定目录下的文件数组，遍历数组得到文件名称。利用vuejs组件懒加载特性，构建懒加载components对象，这里直接构建的全页面共用的components对象，所以包含了一个QueryHeader组件。而页面tab遍历所需的是不包含QueryHeader的，所以tab页面存储使用的platformCompts对象，最后通过Object.assign方法合并对象。在生命周期mounted函数内对platformCompts进行遍历，构建tab页面所需的名称，代码和组件自身，res.default实际是vue页面实例对象，即export default {}对象。

　　27行是在懒加载调用之后获取到文件的名称等信息的，因为lazyload实际返回的是一个promise对象。所以页面加载出来时候会有一定的延时等待。

　　页面代码如下：

　　

<template>
    <div>
        <el-row class="header">
            <query-header @query="query"></query-header>
        </el-row>
        <el-divider class="divider"></el-divider>
        <el-row class="list-container">
            <el-tabs type="card" v-model="activeName">
                <el-tab-pane v-for="(p,i) in platformsList" :key="i" :name="p.name">
                    <span slot="label" class="tab-label">
                        {{p.label}}&nbsp;<i class="el-icon-download" @click="download(p.name)"></i>
                    </span>
                    <keep-alive>
                        <component :is="p.comp"></component>
                    </keep-alive>
                </el-tab-pane>
            </el-tabs>
        </el-row>
    </div>
</template>

　　这里使用的elementui的tabs组件，遍历tab-pane子组件。内部使用compent动态组件接收懒加载组件对象。

　　结果页面：

　　

　　总结：整个过程思路清晰，获取到相对于当前文件指定目录的文件列表后，构建当前页面components懒加载对象，遍历懒加载对象，构建页面tabs所需属性，其中页面使用component接收懒加载对象。