操作文档
首页
  • MNGate系列入门
  • MNConfig使用说明
  • MNGate系列入门(新)
  • BOXConfig使用说明(新)
  • 明牛云平台使用说明
  • 云组态使用说明
  • 数据分析使用说明
  • MNBox系列使用说明
  • MQTT接入
  • BOXConfig使用教程
  • 明牛云平台使用教程
  • 报表设计器使用教程
  • MNConfig使用教程
开发者平台
  • 硬件相关
  • 配置软件相关
  • 平台相关
  • 远程编程相关
  • 组态设计相关
  • 报表相关
  • 第三方BOX相关
私有化平台
更新记录
首页
  • MNGate系列入门
  • MNConfig使用说明
  • MNGate系列入门(新)
  • BOXConfig使用说明(新)
  • 明牛云平台使用说明
  • 云组态使用说明
  • 数据分析使用说明
  • MNBox系列使用说明
  • MQTT接入
  • BOXConfig使用教程
  • 明牛云平台使用教程
  • 报表设计器使用教程
  • MNConfig使用教程
开发者平台
  • 硬件相关
  • 配置软件相关
  • 平台相关
  • 远程编程相关
  • 组态设计相关
  • 报表相关
  • 第三方BOX相关
私有化平台
更新记录
  • 新手指引
  • 平台简介

  • 开发者后台

  • API文档

  • 示例教程

    • 综合示例
    • 平台内置前端代码开发
      • 环境需求
      • 目录结构
      • 推荐开发工具
      • 打包并上传流程
    • 更改内置界面风格样式
    • 更改内置菜单名称和位置
    • 搭建并上传自定义前端代码
    • 自定义接口配置代理及应用
    • 自定义业务和用户企业项目建立关联
    • 添加自定义系统菜单及获取用户token信息
    • 添加自定义项目菜单及获取项目信息
    • 使用webhook拦截系统业务事件
    • 响应数据推送事件
    • 手动获取超级管理员token及应用
    • 系统菜单前端添加自定义页面按钮权限
    • 项目菜单前端添加自定义页面按钮权限
    • 添加自定义操作日志到平台
  • 常见问题

  • 开发者平台
  • 示例教程
2022-09-20
目录

平台内置前端代码开发

概述:

super平台/业务平台,基于VUE3+ElementPlus框架开发。

提示:如开发者需修改平台源码,则需要一定的VUE与Element方面的基础。VUE3学习链接 (opens new window) / ElementPlus学习链接 (opens new window)

# 环境需求

安装 Node.js Node.js 帮助链接 (opens new window),安装VUE,ElementPlus

推荐版本:Node.js@16.17.0,VUE@3,Element@plus

# 目录结构

  • src/apis : 存放访问服务端接口的api目录。
  • src/components : 公用组件存放目录。
  • src/config : 存放 配置信息。如:拦截配置等
  • src/constant : 存放前端常量的目录。
  • src/locales : 存放国际化的词库目录。
  • src/model : 存放服务端实体的目录。
  • src/router : 存放路由配置的目录。
  • src/styles : 存放集中控制平台样式的目录。
  • src/utils : 存放公用的方法/配置文件的目录
  • src/views : 存放平台业务页面的目录

# 推荐开发工具

开发工具:IDEA,VCCODE下载IDEA 链接 (opens new window),下载VCCODE 链接 (opens new window)

# 打包并上传流程

执行(npm run build:dev)命令进行打包,以及将打包内容压缩为.zip文件并发布该工程包

操作示例:使用IDEA进行演示,可根据不同需求使用 cnpm,npm/其它

1.执行 npm i 下载依赖 2.执行 npm run serve:dev 运行项目 3.运行成功后执行 npm run build:dev 进行打包 4.找到工程下的dist目录中的文件进行压缩(格式为:.zip)推荐压缩工具:rar压缩工具 (opens new window) 5.压缩成功后进入开发者平台,找到对应模块进行发布即可(如有疑问请点击一> 代码发布>上传流程图

综合示例
更改内置界面风格样式

← 综合示例 更改内置界面风格样式→

最近更新
01
OPC UA
02-02
02
环保协议(HJ212)
02-02
03
MQTT
02-02
更多文章>
Copyright © 2021-2024
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式