PC插件开发 - 技术支持：凯特伟业

介绍
插件开发
代码部署
开发标准
代码开发
插件部署
菜单部署
顶部菜单部署
自定义打开插件

介绍

方便用户可以更加方便的定制开发个性化的业务需求，平台提供了前端插件项目，可以开发的插件包含：首页，IM，展板等。

插件开发

代码部署

1. 代码仓库

开源项目：jepaas-project-frontent 仓库地址

2. 部署步骤

编辑器打开项目，在终端运行npm i或cnpm i下载package.json中的依赖包
依赖安装完成根目录下会生成node_modules文件，终端输入npm run dev:pc命令运行本地调试
代码开发完成，终端输入npm run build:pc命令，进行打包升级

3. 目录结构介绍

开发标准

1. 在根目录config-pc文件夹下新建config.json文件

config.json文件负责本地的调试的自定义配置

config.json文件内容

{
    "cdn": "http://test.suanbanyun.com", // cdn地址，没有填空字符串
    "proxyServerUrl": "http://dev.suanbanyun.com", // 代理服务器地址
    "entry": ["menuDemo"] // 编译入口，就是我们要自定义插件的文件夹名称
}

2.在根目录src/pc/vue/modules下新建插件文件（文件名称要和config.json中entry属性值对应）

下图示例的插件名称为menuDemo和上面config.json文件中的"enrty": ["menuDemo"]对应

3.在插件文件夹（menuDemo）下新建index.js和index.vue文件

index.js文件名是固定不变的

index.js的内容是

import { install } from '../../install.js';
import index from './index.vue';  //第一个index要和最后一个index名称对应
// 安装组件
install('menuDemo', index);

代码开发

在插件文件夹（menuDemo）中的index.vue下编写代码

效果图

示例代码

<template>
  <div class="menu-demo">
    <h3 class="title">
      菜单插件demo
    </h3>
    <div class="table-div">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="150"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="120"
        />
        <el-table-column
          prop="province"
          label="省份"
          width="120"
        />
        <el-table-column
          prop="city"
          label="市区"
          width="120"
        />
        <el-table-column
          prop="address"
          label="地址"
          width="300"
        />
        <el-table-column
          prop="zip"
          label="邮编"
          width="120"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
            >
              查看
            </el-button>
            <el-button
              type="text"
              size="small"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MenuDemo',
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
        },
      ],
    };
  },
  methods: {

  },
};
</script>

<style lang="scss" scoped>
.menu-demo{
    .title{
        margin: 20px;
        text-align: center;
    }
    .table-div{
        margin: 30px;
    }
}
</style>