概述

系统的前端开发涉及两类主要组件：

1. 移动端组件：位于 view/uniapp/components/，基于 Uni-app / Vue 2；
2. 后台管理端组件：位于 view/admin/src/components/，基于 Vue 2 + View UI。

本文档详细说明在这两种场景下封装与复用自定义组件的规范。

---

移动端组件开发 (view/uniapp)

组件目录

view/uniapp/components/
├── BaseMoney.vue          # 金额价格格式化显示组件
├── BaseTag.vue            # 通用标签徽章组件
├── NavBar.vue             # 自定义顶部导航栏组件
├── emptyPage.vue          # 空状态/缺省页组件
├── countDown/             # 倒计时组件
├── productWindow/         # 商品 SKU 弹窗组件
└── ...

基础组件封装示例

<!-- view/uniapp/components/CustomCard/index.vue -->
<template>
  <view class="custom-card">
    <view class="card-header" v-if="title">
      <text class="title">{{ title }}</text>
      <slot name="extra"></slot>
    </view>
    <view class="card-body">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomCard',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
};
</script>

<style lang="scss" scoped>
.custom-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f0f0f0;
    .title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
    }
  }
  .card-body {
    padding-top: 16rpx;
  }
}
</style>

组件引入与使用

• 局部引入：

  <template>
    <CustomCard title="用户信息">
      <text>内容展示</text>
    </CustomCard>
  </template>
  
  <script>
  import CustomCard from '@/components/CustomCard/index.vue';
  export default {
    components: { CustomCard }
  };
  </script>

• easycom 规则（可选）：符合 Uni-app easycom 规范的组件在页面中可免 import 直接使用。

---

后台管理端组件开发 (view/admin)

组件目录

view/admin/src/components/
├── uploadPictures/        # 图片选择器与上传组件
├── goodsList/             # 商品选择器弹窗组件
├── userLabel/             # 用户标签选择弹窗
├── fromBuild/             # 动态表单构建器
└── ...

后台组件封装示例

<!-- view/admin/src/components/StatusTag/index.vue -->
<template>
  <Tag :color="tagColor">{{ text }}</Tag>
</template>

<script>
export default {
  name: 'StatusTag',
  props: {
    status: {
      type: [Number, String],
      required: true
    }
  },
  computed: {
    tagColor() {
      return this.status === 1 ? 'success' : 'error';
    },
    text() {
      return this.status === 1 ? '启用' : '禁用';
    }
  }
};
</script>

---

组件开发规范

1. 单向数据流：Props 严禁在子组件内直接修改，通过 $emit 触发父组件事件。
2. 样式隔离：Vue 组件 <style> 标签必须添加 scoped，避免全局样式污染。
3. 命名规范：组件名采用大驼峰（PascalCase），文件名与目录保持语义清晰。