PC顶部菜单开发

目的

用户可以灵活的配置平台基本功能之外的业务需求

环境依赖

node: v10.0.0及以上

安装部署

• 安装node环境
• 克隆项目：git clone ‘git地址’
• 安装依赖：npm install
• 启动开发环境：npm run dev
• 打包：npm run build

挂载方式

菜单

顶部菜单

实现步骤

菜单

1.新建config.json文件

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

config.json 是用于个性化配置使用，可以防止config.js被错误提交，影响他人使用

2.config.json文件内容

{
    "cdn": "http://test.suanbanyun.com", // cdn地址，没有可以为空
    "proxyServerUrl": "http://dev.suanbanyun.com", // 代理地址
    "entry": ["menuTestPlugin"] // 打包入口
}

2.创建插件文件

1.在根目录src/vue/moudles下新建插件文件夹，例如menuTestPlugin

2.menuTestPlugin文件下必须要包含index.vue和index.js
3.index.js文件内容

import { install } from '../../install.js';
import index from './index.vue';
// 安装组件
install('menuTestPlugin', index);

4.index.vue文件内容

<template>
  <div class="menu-test-plugin">
    <h2 class="title">
      hello menuTestPlugin
    </h2>
    <div class="list-data">
      <h3>接口数据</h3>
      <p
        v-for="item in dataArr"
        :key="item.id"
      >
        <span>{{ item.name }}-{{ item.value }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Wang1',
  data() {
    return {
      dataArr: [],
    };
  },
  watch: {
  },
  created() {
    this.getData();
  },
  mounted() {
  },
  methods: {
    loadData(type, callback) {
      JE.ajax({
        url: '/je/portal/homePortal/findBubbleMsg',
        params: {
          position: 'more',
          type: 'new',
          start: 0,
          limit: 20,
        },
        async: true,
        success(response) {
          const data = JE.getAjaxData(response);
          if (callback) {
            callback(data.obj);
          }
        },
      });
    },
    getData() {
      this.loadData('type', (data) => {
        this.dataArr = data.rows.map(item => ({
          name: item.MPXX_FSRNC,
          value: item.MPXX_XXNR,
          id: item.JE_CIRCLE_MPXX_ID,
        }));
      });
    },
  },
};
</script>

<style lang="scss" scoped>
  .menu-test-plugin {
    .title{
      text-align: center;
    }
    .list-data{
      margin: 20px;
      text-align: center;
    }
  }
</style>

5.终端运行npm run build命令打包文件，打包完成后根目录就会生成dist目录

3.网站配置

1.进入插件配置

2.插件配置

6逗号为英文字符，逗号前面的字符串格式为JE_PLUFIN_‘大写的插件文件名称’，逗号后面的字符串为根目录dist/pro/插件文件名例如（menuTestPlugin）/View.js

4.效果图

顶部菜单

1、2步同菜单挂载方式一样

3.网站配置

1序号：序号越大，数据越靠前

2编码：编码要保证唯一性，可以写插件名称的大写，例如上图中的TOPCESHI

3类型：类型要选择插件

4启用：启用要勾上

5配置信息：为根目录dist/pro/插件文件名例如（menuTestPlugin）/View.js