概述

系统前端内置了常用的表格、表单、图片选择器、富文本编辑器等基础组件。开发者也可以根据需要引入第三方组件或封装自定义业务组件。

---

引入第三方 NPM 依赖

以安装 vue-grid-layout 栅格布局组件为例：

npm install vue-grid-layout --save

---

组件注册方式

全局注册

在 src/main.js 中全局挂载：

import { GridLayout, GridItem } from 'vue-grid-layout';

Vue.component('i-grid-layout', GridLayout);
Vue.component('i-grid-item', GridItem);

注册后，项目内任意 .vue 页面均可直接使用 <i-grid-layout> 标签。

局部注册

在特定页面单文件组件中按需引入：

<template>
  <div class="my-page">
    <grid-layout :layout.sync="layout" :col-num="12" :row-height="30">
      <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h">
        {{ item.i }}
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout';

export default {
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: "0" }
      ]
    };
  }
};
</script>

---

封装自定义业务组件

• 自定义通用组件放置于 src/components/ 目录下；
• 建议遵循单个组件单目录规范（如 src/components/uploadPictures/index.vue），方便统一导出与维护。