行业包文档管理 行业包文档管理
首页
  • 系统快速上手
  • Git分支管理规则及协作流程说明
  • 系统账号密码说明
  • 架构说明

    • 系统整体架构说明
    • QMS-SPC系统架构说明
  • 后端基础类库说明
  • PC端前端所有组件说明 (opens new window)
  • 数据模型设计与说明
  • 后端新建微服务配置
  • 后端华为OpenApis开发
  • 事务集成
  • PC端前端从0开始

    • 本地部署运行
    • 创建前端工程
    • PC端组件库安装使用
    • 按钮权限基础包
  • 移动端前端从0开始

    • 移动端打包APK
    • 移动端公共组件
    • 移动端公共库
  • 前端公共

    • 前端整体架构
    • 前端注意事项
  • 公有云部署流程
  • iDME私有化部署流程
  • 许可授权流程
  • 各方案推荐配置清单
  • PC端前端二开流程
  • 移动端底座二开流程
  • 更新日志及规范规范
常见问题
Source (opens new window)
首页
  • 系统快速上手
  • Git分支管理规则及协作流程说明
  • 系统账号密码说明
  • 架构说明

    • 系统整体架构说明
    • QMS-SPC系统架构说明
  • 后端基础类库说明
  • PC端前端所有组件说明 (opens new window)
  • 数据模型设计与说明
  • 后端新建微服务配置
  • 后端华为OpenApis开发
  • 事务集成
  • PC端前端从0开始

    • 本地部署运行
    • 创建前端工程
    • PC端组件库安装使用
    • 按钮权限基础包
  • 移动端前端从0开始

    • 移动端打包APK
    • 移动端公共组件
    • 移动端公共库
  • 前端公共

    • 前端整体架构
    • 前端注意事项
  • 公有云部署流程
  • iDME私有化部署流程
  • 许可授权流程
  • 各方案推荐配置清单
  • PC端前端二开流程
  • 移动端底座二开流程
  • 更新日志及规范规范
常见问题
Source (opens new window)
  • 前端整体架构

    • 前端框架
      • 前端框架开发相关插件安装
        • 查看 node 版本
        • 启动前端
      • 前端项目地图
      • 前端手册
      • 前端公共
      sie
      2024-11-25
      目录

      前端整体架构

      # 前端框架

      1.ui 框架 TinyUI3.0 https://opentiny.design/tiny-ng/overview (opens new window)

      TinyUI3.0 简介 TinyUI Pro of Vue 是基于华为云 TinyVue 组件库一整套企业级中后台前端/设计解决方案,致力于在设计规范和基础组件的基础上, 继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 除此之外,为更好的使用云服务的资源,它集成了云服务客户端库 用于打通华为云和云服务插件用于管理和使用您的各类云服务资源。

      2.微前端 无界 https://wujie-micro.github.io/demo-main-vue/home (opens new window)

      无界简介 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。将子应用的 js 注入主应用同域的 iframe 中运行,iframe 是一个原生的 window 沙箱,内部有完整的 history 和 location 接口,子应用实例 instance 运行在 iframe 中,路由也彻底和主应用解耦,可以直接在业务组件里面启动应用。

      3.低代码引擎 TinyEngine https://www.opentiny.design/tiny-engine#/home (opens new window)

      TinyEngine 简介 低代码引擎是一种开发平台,它允许开发人员通过可视化界面和少量编程,快速生成应用程序。 这种开发模式旨在降低开发难度,提高开发效率,同时减少对专业编程技能的要求。低代码引擎通过提供预构建的组件、模板和工具,使得开发人员能够通过拖放界面元素、配置业务逻辑等方式,快速搭建应用程序。

      # 前端框架开发相关插件安装

      【prettier 插件】

      1.prettier 插件的作用

      这个插件可以自动把变量中的双引号自动在格式化的时候转成单引号,把大括号后面的分号自动去掉,使之更符合 eslint 的语法规范。

      2.使用步骤

      在 vue 项目的根目录下新建'.prettierrc'文件,文件中新增下面的内容

      {
        // 自动添加行尾的分号
        "semi": false,
        // 双引号自动转单引号
        "singleQuote": false
      }
      
      1
      2
      3
      4
      5
      6

      3.重启项目,格式化代码,此时就会发现,变量中的双引号自动转变成单引号了。 注意:若未安装 prettier 插件,请先安装。

      # 查看 node 版本

      node -v
      
      1

      # 启动前端

      node 版本 = 16

      # 查看node版本
      node -v
      
      #高版本执行切换至16
      nvm use 16.18.1
      
      # 下载前端源码
      git clone http://192.168.175.208/dme/mbm-mom-ui.git
      
      # 安装前端依赖
      npm i --registry=http://192.168.181.114:8081/repository/npm-group/
      
      # 启动
      npm run dev
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14

      # 前端项目地图

      代码仓库地址:http://192.168.175.208

      项目 项目说明 备注 本地开发 dev 环境地址
      mbm-mom-ui 前端 web 端项目开发模板 develop分支:模板分支,MOM-test分支:打样分支
      mbm-mom-wujie 门户前端底座 http://localhost:11111 http://192.168.168.207:31850
      mbm-mom-admin-ui 门户前端管理后台 http://localhost:7080 http://192.168.168.207:31860
      mbm-mom-dwq-aps-ui 大湾区 APS http://localhost:5173 http://192.168.168.207:31862
      mbm-mom-app-ui 前端移动端端项目开发模板 安卓包名:com.sie.dme.mbm http://localhost:8086 http://192.168.168.207:31869
      mbm-mom-smt-mes-ui SMT 行业移动端 http://localhost:5173 http://192.168.168.207:31861
      mbm-mom-tools-app MBM-MOM 工治具工治具 App 端 安卓包名:com.sie.mbm.tools http://localhost:10243
      mbm-mom-tools-ui MBM-MOM 工治具项目微前端 http://localhost:10242 http://192.168.168.207:31892
      mbm-mom-led-mes-app MBM-MOM LED 行业 MES 移动端 app 安卓包名:com.sie.mbm.led.mes http://localhost:10241 http://192.168.168.207:31870
      mbm-mom-led-mes-ui MBM-MOM LED 行业 MES 前端 http://localhost:10240
      mbm-mom-nationstar-app 国星光电移动端 安卓包名:com.sie.dme.nationstar http://localhost:10251 http://192.168.168.207:31871
      mbm-mom-nationstar-ui 国星光电交付 PC 端 http://localhost:10250
      mbm-mom-tiny-engine-ui 低代码平台 http://localhost:8028
      mbm-mom-public-ui 公共模块 PC 端 UI http://localhost:8180 http://192.168.168.207:31999
      mbm-mom-aps-ui MBM-MOM APS 前端 从 mbm-mom-dwq-aps-ui 拷贝 http://localhost:5173
      mbm-mom-electronic-ui electronic 前端 从 mbm-mom-public-ui 拷贝 http://localhost:8181
      mbm-mom-huaxin-ui 华鑫 PC 端 从 mbm-mom-public-ui 拷贝 http://localhost:8182
      snack Snack 工业级前端业务组件库 Snack 文档:http://localhost:8022
      Snack demo:http://localhost:8023
      pkg 文档:http://localhost:8021
      pkg demo:http://localhost:8024
      http://192.168.168.207:32005/
      @mom/mobile-base 移动端底座 安卓包名:com.sie.dme.base http://localhost:13000
      @dme/mobile-lib dme 移动端底座依赖包 安卓包名:com.sie.dme.lib http://localhost:13010
      mbm-mom-eam-ui 设备管理 PC 端 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8081/ http://192.168.168.207:32004
      mbm-mom-designer-ui 设计即服务 PC 端 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8085/ http://192.168.168.207:32003
      mbm-mom-qms-spc-cfg-ui QMS 质量管理 SPC 基础配置 PC 端 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8088/ http://192.168.168.207:32006
      mbm-mom-qms-spc-ui QMS 质量管理 SPC PC 端 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8087/ http://192.168.168.207:32007
      fim-ui 质量管理体系前端 PC 端(原 qms-ui) 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8082/ http://192.168.168.207:32008
      @imom/mpm-ui MPM PC 端 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8089/ http://192.168.168.207:32009
      mbm-mom-duanix-ui 煅翼 PC 端 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8090/ http://192.168.168.207:32010
      @imom/les-ui LES PC 端 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8091/ http://192.168.168.207:32011
      imom-mes-report-ui imom-mes-ui/report-ui 前端 UI 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8092/ http://192.168.168.207:32012
      imom-public-ui imom-public-ui 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8093/ http://192.168.168.207:32013
      mbm-mom-nationstar-aps-ui 国星-APS PC 端 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8094/ http://192.168.168.207:32014
      process-control imom-qms-ui/process-control 从 mbm-mom-fim-ui 拷贝 http://localhost:8095/
      imom-public-kernel imom-public-ui/imom-kernel 基础功能前端 UI 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8096/ http://192.168.168.207:32016
      imom-skyworth-aps-ui 创维-APS PC 端项目 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8097/ http://192.168.168.207:32017
      imom-mdm-mdm-ui 标品 主数据 PC 端项目 从 mbm-mom-ui/-/tree/pc-ui-template 拷贝 http://localhost:8098/ http://192.168.168.207:30000/imom-mdm/mdm/
      imom-mdm-plat-ui 轻开发平台 PC 端项目 从 mbm-mom-ui/-/tree/react-ui-template 拷贝 http://localhost:8099/
      imom-les-ui 新les(react) PC 端项目 从 mbm-mom-ui/-/tree/sdesigner-ui-template 拷贝 http://localhost:8100/
      imom-sys-ui 新sys(react) PC 端项目 从 mbm-mom-ui/-/tree/sdesigner-ui-template 拷贝 http://localhost:8101/
      imom-mes-ui 新mes(react) PC 端项目 从 mbm-mom-ui/-/tree/sdesigner-ui-template 拷贝 http://localhost:8102/
      imom-mpm-mpm-ui 新mpm(react) PC 端项目 从 imom-mdm-ui 拷贝 http://localhost:8103/
      在线编辑 (opens new window)
      最近更新
      01
      交付人员二开
      09-16
      02
      业务集成二开
      09-16
      03
      事务集成
      07-09
      更多文章>
      Theme by Vdoing | Copyright © 2023-2026 SIE
      • 跟随系统
      • 浅色模式
      • 深色模式
      • 阅读模式