前端整体架构
# 前端框架
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
}
2
3
4
5
6
3.重启项目,格式化代码,此时就会发现,变量中的双引号自动转变成单引号了。 注意:若未安装 prettier 插件,请先安装。
# 查看 node 版本
node -v
# 启动前端
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
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/ |