JLC Docs
PIG
AI
PIG
AI

前端首页组件开发

首页组件开发

自定义首页组件开发，可以在首页展示自定义的业务组件或数据展示卡片。

首页组件示例

开发组件

在 src/views/home/widgets/components 目录下创建组件文件。

组件目录结构
组件命名规范

建议使用小写字母和连字符命名组件文件，如 test-demo.vue，保持命名规范和统一。

组件示例

创建一个简单的组件文件 test-demo.vue：

<template>
  <div class="widget-card">
    <h3>自定义组件标题</h3>
    <p>这里是组件内容</p>
  </div>
</template>

<script setup lang="ts">
// 组件逻辑代码
</script>

<style scoped>
.widget-card {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}
</style>

挂载组件

在 src/views/home/widgets/index.vue 中挂载组件，将 myGrid 数组增加上一步创建的组件文件名称。

const myGrid = [
  'test-demo',
];
挂载组件配置
组件名称一致性

确保 myGrid 数组中的组件名称与实际创建的组件文件名称完全一致，否则组件无法正常加载。

完整示例

创建组件

<template>
  <div class="custom-widget">
    <div class="widget-header">
      <h3>数据统计</h3>
    </div>
    <div class="widget-content">
      <div class="stat-item">
        <span class="label">今日访问</span>
        <span class="value">1,234</span>
      </div>
      <div class="stat-item">
        <span class="label">总用户数</span>
        <span class="value">5,678</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const stats = ref({
  todayVisit: 0,
  totalUsers: 0,
});

onMounted(() => {
  // 获取统计数据
  fetchStats();
});

const fetchStats = async () => {
  // API 调用逻辑
};
</script>

<style scoped>
.custom-widget {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.widget-header {
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.stat-item:last-child {
  border-bottom: none;
}
</style>

注册组件

在 src/views/home/widgets/index.vue 中注册：

const myGrid = [
  'test-demo',
  'custom-widget', // 新增的组件
];
组件动态加载

组件会自动动态加载，无需手动 import，框架会根据组件名称自动引入对应的组件文件。

注意事项

组件开发规范
  • 组件文件必须放在 src/views/home/widgets/components 目录下
  • 组件名称使用小写字母和连字符（kebab-case）
  • 组件必须是 Vue 单文件组件（.vue 文件）
  • 确保组件在 myGrid 数组中正确注册

组件布局

首页组件支持网格布局，可以通过配置调整组件的大小和位置。

响应式布局

首页组件支持响应式布局，会自动适配不同屏幕尺寸，在移动端和桌面端都能良好展示。

本页目录