基于vue2商城管理首页

以下是一个基于Vue2的商城管理首页的代码示例：

<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>商城管理首页</h1>
    </div>
    <div class="dashboard-content">
      <div class="dashboard-card">
        <h3>总订单数</h3>
        <p>{{ totalOrders }}</p>
      </div>
      <div class="dashboard-card">
        <h3>总销售额</h3>
        <p>{{ totalSales }}</p>
      </div>
      <div class="dashboard-card">
        <h3>总用户数</h3>
        <p>{{ totalUsers }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalOrders: 0,
      totalSales: 0,
      totalUsers: 0
    };
  },
  mounted() {
    // 在组件挂载后获取数据
    this.getTotalOrders();
    this.getTotalSales();
    this.getTotalUsers();
  },
  methods: {
    getTotalOrders() {
      // 发送请求获取总订单数
      // 可以使用axios或其他HTTP库发送请求
      // 示例代码仅用setTimeout模拟异步请求
      setTimeout(() => {
        this.totalOrders = 100;
      }, 1000);
    },
    getTotalSales() {
      // 发送请求获取总销售额
      // 示例代码仅用setTimeout模拟异步请求
      setTimeout(() => {
        this.totalSales = 10000;
      }, 1000);
    },
    getTotalUsers() {
      // 发送请求获取总用户数
      // 示例代码仅用setTimeout模拟异步请求
      setTimeout(() => {
        this.totalUsers = 1000;
      }, 1000);
    }
  }
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 20px;
}

.dashboard-content {
  display: flex;
  justify-content: space-between;
}

.dashboard-card {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
  flex-basis: 30%;
  text-align: center;
}

.dashboard-card h3 {
  margin-top: 0;
}

.dashboard-card p {
  font-size: 24px;
  font-weight: bold;
}
</style>

这个示例代码中，使用了Vue的单文件组件（SFC）的写法，将模板、逻辑和样式都放在同一个文件中。在data中定义了需要显示的数据，mounted钩子函数会在组件挂载后调用getTotalOrders、getTotalSales和getTotalUsers方法，这些方法用于发送请求获取数据，并将数据赋值给对应的属性。在模板中使用插值语法将数据显示出来。样式部分使用了scoped属性，使得样式只作用于当前组件。

注意：示例中的异步请求仅使用setTimeout模拟，实际项目中需要使用真实的异步请求处理方式