<template>
  <basic-container>
    <h2>项目介绍</h2>
    <p style="line-height:30px">
      Avue-cli基于 vue3 + vite + element plus + avue3 + vue-router + vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。
    </p>
  </basic-container>
  <basic-container>
    <el-descriptions title="项目信息"
                     :column="2"
                     border>
      <el-descriptions-item>
        <template #label>
          项目名称
        </template>
        avue-cli
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          版本
        </template>
        3.x
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          代码地址
        </template>
        <a href="https://gitee.com/smallweigit/avue-cli"
           target="_blank">
          <el-tag>https://gitee.com/smallweigit/avue-cli</el-tag>
        </a>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          预览地址
        </template>
        <a href="https://cli.avuejs.com"
           target="_blank">
          <el-tag>https://cli.avuejs.com</el-tag>
        </a>
      </el-descriptions-item>
    </el-descriptions>
  </basic-container>
  <basic-container>
    <el-descriptions title="项目依赖"
                     :column="2"
                     border>
      <el-descriptions-item v-for="(item,index) in list"
                            :key="index">
        <template #label>
          {{item}}
        </template>
        {{dependencies[item]}}
      </el-descriptions-item>
    </el-descriptions>
  </basic-container>
</template>

<script>
export default {
  data () {
    return {
      dependencies: {}
    }
  },
  created () {
    const modules = import.meta.glob('/**.json')
    modules['/package.json']().then(mode => {
      this.dependencies = mode.dependencies
    })
  },
  computed: {
    list () {
      return Object.keys(this.dependencies)
    }
  }
};
</script>

<style lang="scss">
</style>
