- 博客(218)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 微前端（十一）子应用注意window的使用
子应用切记禁慎 window对象的使用类似这种代码 queryAllAccounts:`${window.projectName.loginDes}/component/allTenant`,这种代码开发可能是ok的，但放入到乾坤后发现代码不好使了。原因就是window对象的使用，因为放入乾坤后的window是主应用的window对象了，而不是子应用的window。解决方案：1、则需要将window.projectName对象注册到主应用才行。2、最好的做法还是子应用尽量不要使用window
2021-10-20 08:03:43
4053
2
原创 微前端（十）子应用不要写动态load相应js文件
sub应用以前写了动态load js文件来实现赖加载，但发现改成微应用后不行了if ($.fn.zTree == null) { //异步加载树对象 let queryCommand = new QueryCommand(`/static/plugin/jquery.ztree.core.min.js`); queryCommand.getScriptAsyncQuery(() => {}); }
2021-10-09 12:34:46
279
原创 微前端（九）全局静态文件引入
比如主应用引入了字体文件子应用也引入了字体文件这样写当然没有问题，如果现在想减少请求次数，主应用引入了该文件，则子应用则可以不再引入啊。但如果子应用去掉该引入，会出现一个问题，就是直接刷新子应用界面的时候，字体图标不会显示。解决方案1:还是上面说的 主应用和子应用引入相同的静态文件，缺点就是重复引用，无效开销。解决方案2：就是判断刷新，如果不是主应用刷新，而是刷新的子应用，则先跳转到主应用，然后再路由到子应用。方案1就不说了，下面介绍方案2第一步：在main.js里面判断刷新界面if
2021-10-09 11:55:01
352
原创 微前端（八）sub应用不要写全局样式
sub应用最好不要去写全局的样式定义，比如：* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}*:before,*:after { box-sizing: border-box;}body { font-family: @font-family; font-size: 12px; line-height: @line-height-base;
2021-10-08 22:36:42
233
原创 微前端（七）main与sub应用的服务代理
1、服务代理子应用并不需要进行设置，只需要设置主应用即可。子应用不需要进行代理设置则可以通过代理获取到相应后台数据
2021-10-07 16:28:48
434
原创 微前端（六）main与sub应用之间进行数据通讯二（props）
微前端（五）介绍了通过动态监听模式来通讯，本节介绍一种简单粗暴的通讯方法1、就是在注册应用的时候放到props里面这里将router对象放到props里面来2、点击进入子应用的mount可以打印出相应的值从console可以找到相应对象。通过这种传递可以将一些固定值传递到子应用。...
2021-09-06 00:35:13
360
原创 微前端（五）main与sub应用之间进行数据通讯一（initGlobalState）
1、主应用定义initGlobalState全局状态储存机制import { initGlobalState, MicroAppStateActions } from "qiankun";const initialState = {};const actions: MicroAppStateActions = initGlobalState(initialState);export default actions;2、修改main.ts，将申明的actions绑定到主应用的vue上3、主
2021-09-06 00:26:46
1046
原创 微前端（四）go-app-sub的实现
子项目配置配置子项目的main.ts// 注意哦，这一行引入不要忘记了，要加载最上面import './public-path';import $ from "jquery";import Vue from "vue";import App from "./App.vue";import routes from "./router";import store from "./store";// @ts-ignoreimport vcolorpicker from 'vcolorpi
2021-09-06 00:18:29
187
原创 微前端（三）go-app-main的实现
go-app-main是微前端的主体框架，go-app-main会扩展qiankun，go-app-main负责菜单、门户的管理。在此以华为云的一个界面来做demo左边菜单对应相应的子应用菜单。main.ts的配置重点：上核心配置：import Vue from "vue";import VueRouter from "vue-router";// @ts-ignoreimport App from "./App.vue";import routes from "./routes";
2021-09-06 00:10:23
518
原创 公司基础脚手架（一）脚手架项目建立
1、创建项目文件夹mkdir go-scripts2、初始化项目cd go-scripts npm init3、添加几个核心基本依赖npm install commander inquirer chalk --save目录结构基本如下：4、修改package.json{ "name": "go-scripts", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {
2021-04-29 14:55:54
198
3
原创 bpmn-js（五） 线条上添加决策表达式
bpmn-js确实强大，但资料也确实太少。可能也只有作者知道咋玩，为了给线条加上表达式这么个功能 生生的看了2天源码才搞定。 const moddle = window.prcessAppObj.bpmnModeler._moddle; var conditionExpression = moddle.create('bpmn:FormalExpression', { body: this.nodeItem.condition });const modeling = windo
2021-04-27 00:27:43
2838
11
原创 微前端（二）go-login项目开发
go-login项目是登录项目，登录项1目没有难点就是一个常规登录界面开发，因为这将是首屏界面，注意一下几点尽量不要采用大的ui框架，我这使用elementui 不是全局引入，而是通过局部按需引入的方式来进行加载。不写多余的js和css，就写登录应用相关代码，保证最终的dist包在300kb之内，这样就可以保证秒开。不采用vuex、vue-router之类的框架。1、新建项目vue create go-login2、引入less 这里注意less版本，如果版本less-loader过高会有
2021-04-25 00:56:04
826
1
原创 微前端（一）项目搭建
微前端的春风已经吹遍了前端行业，国内可能用qiankun来做微前端最多的吧,我这里也是采用qiankun来进行验证。为了赶上微前端这列车，打算还是写几个demo来验证下。目前如果输入qiankun进行搜索，网上的例子基本都是官方的那个列子，丑、简单，基本找不到比较好的企业级应用列子，求人不如求己还是自己上吧计划写如下一个列子建立4个应用，1个是登录应用，1个是主框架应用，1个是oa任务应用、1个是oa会议应用。将oa的任务应用和oa的会议应用注册到主框架应用。项目目录结构大概如下：go-lo
2021-04-24 21:45:34
579
原创 vue打包文件过大（一）
项目上线了，业务功能ok，界面外观ok。就是有点缺陷就是第一次登录太慢了要8-9秒。这是客户给我的说的，虽然我解释了单页应用的优缺点，但还是需要分析下。最大的文件就是app.8669b0c5.js和chunk-vendors.c823af3e.js咋整呢，只能逐个来分析了安装分析插件webpack-bundle-analyzer ，这个就不说了配置vue.config.js文件 config .plugin('webpack-bundle-analyzer'
2021-02-26 11:04:05
657
4
原创 bpmn-js（四） 添加各类网关到设计器中
默认bpmn-js设计器没有添加网关的绘制，但实际业务中会使用网关来控制并发、选择性运转等。第一步：修改PaletteProvider.js文件第二步：添加下面的内容 'create.exclusive-gateway': createAction( 'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-xor', translate('排他网关') ), 'create.parallel-gateway
2021-01-26 19:31:02
2157
3
原创 bpmn-js 改造（三）给节点添加颜色，给边线加上滚动功能
给节点添加颜色，其实给节点加颜色的方式比较多。我使用的比较粗暴的方式，直接使用jquery，加样式的方式 $("g[data-element-id='"+nodeId+"']").find(".djs-visual rect").css("fill",colors["not-pass-node"]["bgColor"]);其实就是根据节点id找到相应显示rect 设置其中的颜色样式。效果图：给红色边框加上滚动效果；第一步：添加样式信息 @-webkit-keyframes test {
2021-01-17 19:48:06
3416
2
原创 bpmn-js 改造（二）预览状态下添加拖拽功能
流程图查看采用的是BpmnViewer方式来展示流程图，上效果图：问题来了，发现svg图片无法拖拽位置，在设计模式下是可以的，但查看模式不行了。但有些场景是需要进行拖拽的。手动加上拖拽功能，因为我这边修改了大量bpmn-js的源码，所以我采用的是直接在这个源码基础上扩展。找到Viewer.js文件然后在导入的地方加上import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";import MoveCanvasModu
2021-01-17 19:41:06
2745
原创 bpmn-js 改造（一）添加会签节点
bpmn-js应该是使用最广最普遍的一个流程设计器。前段时间自己写了个流程设计器，为了更好的完善自己写的设计器，所以拿bpmn-js来进行一次研究。bpmn-js 网上各种帖子，但大部分都是停留在测试、学习层面，基本很少有结合企业业务来扩展的，所以我这里结合业务记录下bpmn-js的使用流程会签：就是流程运转过程中需要提交给多个人进行审批，每个人可以发表意见，而且会签也存在一票否决、比例决策、全票决策等策略。为了实现该功能，第一步应该是要绘制这样一个节点，表示进入到会签，后台根据这个特殊节点进行代码
2021-01-10 11:12:19
7836
10
原创 ivew+vue实现表单设计器--实现tab多页签的拖拽添加（七）
前面实现了table表格的拖拽生成，这里记录下tab标签页的拖拽生成。直接上图：拖拽数据的准备import getTabPanelTemp from "./getTabPanelTemp";import GoingUtils from "../../../utils/goingUtils";export default { __config__: { layout: 'tabsItem', elTag: 'tabs', tagIcon: 'gf-tabs',
2020-12-21 13:22:30
1181
2
原创 vue 设置事件总线 EventBus
有些场景下使用 EventBus 总线要让代码简单许多。第一步：编写EventBus类 class EventBus { constructor(){ (this as any).callbacks = {} } /** * 事件总线中注册事件 singleFlag为true 表示只能注册一次 防止重复执行 * @param name * @param fn * @param singleFlag */
2020-12-21 12:17:10
223
bootstrap框架nifity
2016-05-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人