{"_id":"@chensi-thunder/fe-micro-main","name":"@chensi-thunder/fe-micro-main","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@chensi-thunder/fe-micro-main","version":"1.0.0","description":"特定微前端主工程入口框架","main":"dist/lib.min.js","module":"dist/lib.esm.js","scripts":{"build":"rollup --config","prepublishOnly":"npm run build"},"dependencies":{"import-html-entry":"^1.4.1","url-parse":"^1.4.7","vue":"^2.6.11","vue-router":"^3.0.1","vue-template-compiler":"^2.6.11","whatwg-fetch":"^3.0.0"},"devDependencies":{"@babel/core":"^7.11.1","@babel/preset-env":"^7.11.0","@rollup/plugin-babel":"^5.1.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^8.4.0","rollup":"^2.23.1","rollup-plugin-clean":"^1.0.0","rollup-plugin-terser":"^7.0.0","rollup-plugin-vue":"^2.4.1"},"author":{"name":"chensi-thunder"},"license":"MIT","gitHead":"5c25848e1632b282f4ba9fbe060702dc305d4824","_id":"@chensi-thunder/fe-micro-main@1.0.0","_nodeVersion":"12.22.3","_npmVersion":"8.19.3","dist":{"integrity":"sha512-o1D5TF8ar+7e9tD1t1TmG78S+/7jh3Oia4VurMV4eYef+GM43lkVlEcJk/gV05z22nYnjjJ/3Oo4rOpptgykgw==","shasum":"2bad42f2ef6fa7c8e627f073e6a542fe35ff3f80","tarball":"https://registry.npmjs.org/@chensi-thunder/fe-micro-main/-/fe-micro-main-1.0.0.tgz","fileCount":4,"unpackedSize":141808,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe0nxoCCtks19waXoYUud8DIukHeSfhiHAMTYnzXu+8AIgbWy7xrMD21q7Yz71TREzm+90JOWvPD3698j7JsYi+fA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlKQWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1CA/9HU6JrQNfvdqaMaK8ciZOiBEaAM2zqCPYvWp5sEdQuE+9atPF\r\n8kAv4SpPbj7EnIJ4L1oMS9rNfi8Dp0Zf7vhxAfNNKSv2Az8z6cxKPtK2uVde\r\nR77xzS4xCIvt9xum0DlkUyocUX8s19Wj80/8VsRiFeYIVC17CBrx0PYGcheE\r\nqBZ5k8nqNDmnfhfR1BPauCbwKNLn1mnYwqMW+gA3lEjITH0XEi2Bwky1eRpW\r\nRiO+Qh2wnKIr+B/WFejX7oW3pxsNznluF0AV3FCKJh3rSWyawaIEF6fA2l8X\r\nf4gcx+IH2QMFU7DpTtsayUIQXeKzzQLtMHoNBsIpGzouhgBEuhN/drSYIaT8\r\nwK+w+pDyrkiPy5Cev5RhJ6tQyx+MAIdryc21Jgp3DEtnl/Ae/HHkrAJUCyOE\r\nkQR5TbjvORH1mE3eVxlIy3PpkVEJGdKFPKg6u8h1L0pFdxxf+1vYrAiQGgZK\r\nvf9MyEXe1mFBqELAQpqC532JAO8knWR5HAB8uM4kC5/owF5JO05D5qLL4xIQ\r\nZ+1goK8cNWuHEZ66XU0wcyjLUEQa+PBDAFIavcTWcgWGos+qI4bO5b4ZA4PP\r\nCkc2aDy810pWK1F+gfqGfl8dXrosMlVVnXSt4YtwdKQu//xc3Tf7rRhy4FFV\r\nOxKnCZXnuz99P93veLT48DnMrBKzUeHJecA=\r\n=rI2n\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"chensi-thunder","email":"694092524@qq.com"},"directories":{},"maintainers":[{"name":"chensi-thunder","email":"694092524@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-micro-main_1.0.0_1670685718680_0.7094624658535416"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-10T15:21:58.600Z","1.0.0":"2022-12-10T15:21:58.919Z","modified":"2022-12-10T15:21:59.051Z"},"maintainers":[{"name":"chensi-thunder","email":"694092524@qq.com"}],"description":"特定微前端主工程入口框架","author":{"name":"chensi-thunder"},"license":"MIT","readme":"- [APP前端主工程使用指南](#app前端主工程使用指南)\n  - [1. 快速使用](#1-快速使用)\n    - [1.1 安装 fe-micro-main](#11-安装-fe-micro-main)\n    - [1.2 在主应用中注册子应用](#12-在主应用中注册子应用)\n  - [2. 基础数据类型](#2-基础数据类型)\n    - [UrlParser](#urlparser)\n    - [AppConfig](#appconfig)\n  - [3. API](#3-api)\n    - [3.1 appRouter](#31-approuter)\n      - [3.1.1 props 属性](#311-props-属性)\n        - [apiRule](#apirule)\n      - [wsEvRule](#wsevrule)\n        - [pathBase](#pathbase)\n        - [appList](#applist)\n        - [customProps](#customprops)\n        - [defaultPath](#defaultpath)\n        - [isSandBox](#issandbox)\n        - [keepAlive](#keepalive)\n        - [beforeAppEnter](#beforeappenter)\n        - [beforeAppLeave](#beforeappleave)\n        - [afterAppMounted](#afterappmounted)\n        - [beforeRouterChange](#beforerouterchange)\n      - [3.1.2 events 事件](#312-events-事件)\n        - [routerChanged](#routerchanged)\n        - [beforeFirstAppMount](#beforefirstappmount)\n        - [firstAppMounted](#firstappmounted)\n        - [noAppchange](#noappchange)\n        - [appChange](#appchange)\n      - [3.1.3 slots](#313-slots)\n        - [appError](#apperror)\n        - [loading](#loading)\n        - [appNotFound](#appnotfound)\n      - [3.1.4 appList 属性配置](#314-applist-属性配置)\n        - [name](#name)\n        - [title](#title)\n        - [host](#host)\n        - [render](#render)\n        - [activeRule](#activerule)\n        - [isActive](#isactive)\n        - [apiRule](#apirule-1)\n      - [wsEvRule](#wsevrule-1)\n        - [pathBase](#pathbase-1)\n        - [customProps](#customprops-1)\n    - [3.2 appHistory](#32-apphistory)\n      - [appHistory.push](#apphistorypush)\n      - [appHistory.replace](#apphistoryreplace)\n  - [注意：](#注意)\n\n# APP前端主工程使用指南\n## 1. 快速使用\n### 1.1 安装 fe-micro-main\n主工程使用所有依赖函数、组件等走需要依赖`fe-micro-main`工程，该工程为主项目构建提供基础能力\n\n``` sh\n# yarn 方式安装\nyarn add fe-micro-main --registry=http://192.168.101.68:4873\n# npm\nnpm install fe-micro-main --registry=http://192.168.101.68:4873\n```\n\n### 1.2 在主应用中注册子应用\n\n``` js\n<template>\n  <div id=\"app\">\n    <app-router\n      :appList=\"[{\n          name: \"alive-app\",\n          title: \"动态服务app\",\n          host: \"http://localhost:8000/\"\n        }, {\n          name: \"test-app\",\n          title: \"app模块\",\n          host: \"http://localhost:8001/\"\n        }]\"\n      :customProps=\"{a: 233}\">\n    </app-router>\n  </div>\n</template>\n\n<script>\nimport { appRouter } from 'fe-micro-main'\nexport default {\n  name: 'App',\n  components: { appRouter },\n  data () {\n    return {\n      appList: undefined\n    }\n  }\n}\n</script>\n```\n\n引用`app-router`组件，并且使用为属性`appList`设置需要注册的app。当子应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发app的路由的匹配逻辑，当子app被匹配后即处于激活状态，则该app对应的 render 方法就会被调用。\n\n## 2. 基础数据类型\n### UrlParser\n具体详情可参照[url-parse](https://www.npmjs.com/package/url-parse)\n\n``` js\n<!--参数对象介绍-->\n{ \n    protocol: String, // 协议部分 (e.g. http:).\n    slashes: Boolean, // 一个布尔值，表示协议后面是否有两个斜杠(//).\n    host: String, // 主机名和端口号.\n    hostname: String, // 主机名.\n    port: String, //端口号.\n    pathname: String, // url path部分.\n    query: Object, // url query部分解析对象 {a: 23, b: 23}.\n    hash: String, // url中#符号部分.\n    origin: String // URL的原始source.\n}\n```\n### AppConfig\n当前app的基础配置,主要包含app名称、中文名称、host以及一些其他基础配置参数\n\n``` js\n{\n    name: String, // 主工程解析该app后名称，主要用于路由前缀\n    title: String, // 当前app的中文名称\n    host: String, // 当前app的部署路径，支持相对路径、绝对路径，\n    render: Function, // 当前app的配置的render函数,用于自定义渲染\n    activeRule: Function， // 当前app激活时满足的路由状态，用于处理特殊app中的特殊场景激活的状态，该规则会覆盖原有的默认激活方式，即`name`和`pathBase`失效\n    apiRule: String, // app调用api前缀,前缀中会默认识别`{name}`,并将`{name}`替换为当前app name\n    wsEvRule: String, // app使用websocket时，为app转发app的ws事件处理签注,前缀中会默认识别`{name}`,并将`{name}`替换为当前app name\n    pathBase: String // 当前所有app注册时的router前缀\n}\n```\n\n\n## 3. API\n\n### 3.1 appRouter\n主项目接收app配置参数组件，是子app的主容器，该文件为引入app必备状态\n\n``` js\nimport { appRouter } from 'fe-micro-main'\n```\n\n下面将介绍该组件的属性\n\n#### 3.1.1 props 属性\n\n##### apiRule\n* app调用api前缀,前缀中会默认识别`{name}`,并将`{name}`替换为当前app name\n* 类型：`String`\n* 默认值：`/{name}-api`\n\n#### wsEvRule\n* app使用websocket时，为app转发app的ws事件处理签注,前缀中会默认识别`{name}`,并将`{name}`替换为当前app name\n* 类型：`String`\n* 默认值：`{name}/`\n\n##### pathBase \n* 当前所有app注册时的router前缀\n* 类型：`String`\n* 默认值：''\n\n\n##### appList\n* app列表\n* 类型：`Array`，具体配置参数请查看[3.1.4 appList 属性配置](#314-applist-%e5%b1%9e%e6%80%a7%e9%85%8d%e7%bd%ae)\n* 默认值：`[]`\n\n\n##### customProps\n* 自定义props，需要传递给app自定义属性，可用于主应用与app之间传递auth数据等\n* 类型：`Any`\n* 默认值：`-`\n\n``` js\n// 主应用 app.vue\n<app-router\n  :app-list=\"appList\"\n  :customProps=\"{getToken: function () {\n      // 返回当前的localStorage中的token数据\n      return window.localStorage.getItem('token')\n  }}\"></app-router>\n\n\n// 子app应用\nregisiterApp({\n  // 用于传递vue作用域，避免提取公共方法后，vue版本不一致问题\n  Vue,\n  // 用于主函数渲染的对象，不需要包裹new Vue\n  app: {\n    router,\n    el: '#app',\n    components: { App: () => import('./App.vue') },\n    template: '<App/>',\n    // vue的生命周期钩子都接受props属性，用于接收主工程向子工程传递的属性，用于主项目和子app进行通讯\n    beforeCreate: (props) => {\n      console.log(props)\n      console.log(props.getToken())\n    }\n  },\n  // 开发测试阶段api前缀,app声明周期中，用于设置开发环境默认路由\n  apiPrefix: '/api'\n})\n\n```\n\n##### defaultPath\n* 默认展示的路径,即主应用默认展示的app的路由路径\n* 类型：`String`\n* 默认值：`-`\n\n\n##### isSandBox\n\n* 是否使用沙箱机制,目前沙箱机制隔离了基础的css、js\n* 类型：`Boolean`\n* 默认值：`true`\n\n##### keepAlive\n* 是否缓存，为`true`时，当前app非激活态且非第一次加载时，不销毁app实例；否则销毁app实例\n* 类型：`Boolean`\n* 默认值：`false`\n\n##### beforeAppEnter\n* 子应用渲染前调用函数\n* 类型：`Function`,接收参数`(appConfig, appInitObj, vm)`，`appConfig`为app基础配置，`appInitObj`为app init初始化对象，vm为当前app实例\n* 默认值：`-`\n\n\n##### beforeAppLeave\n\n* 子应用destroy、deactived调用函数\n* 类型：`Function`,接收参数`(appConfig, appInitObj, vm)`，`appConfig`为app基础配置，`appInitObj`为app init初始化对象，vm为当前app实例\n* 默认值：`-`\n  \n##### afterAppMounted\n\n* app渲染之后自定义回调函数\n* 类型：`Function`,接收参数`(appConfig, appInitObj, vm)`，`appConfig`为app基础配置，`appInitObj`为app init初始化对象，vm为当前app实例\n* 默认值：`-`\n\n\n##### beforeRouterChange\n\n* 用于处理router变化前，接收处理数据，用于拦截路由变化之前，对路由重写功能，类似router forEach，可处理auth 权限(暂时不支持promise处理，默认异步函数时，会默认触发一次history push操作，继续触发replace操作。后续支持)\n* 类型：`Function`, 接收参数`(to: UrlParser, from: UrlParser, next: Function)`\n* 默认值：`-`\n\n> `to`: 即将要进入的目标路由对象\n> `from`: 当前导航正要离开的路由对象\n> `next`一定要调用该方法来 resolve 这个钩子:\n> * `next()`： 直接跳转到即将跳转的导航\n> * `next(false)`： 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。\n\n``` js\n    beforeRouterChange (to, from, next) {\n      // 当to的路径为'/user/test-app'时，不跳转\n      if (to.pathname === '/user/test-app') return next(false)\n      next()\n    },\n```\n\n#### 3.1.2 events 事件\n\n##### routerChanged\n* 主工程路由发生变化触发事件\n* 参数：`(to: UrlParser) => {}`触发change事件的跳转到url的parse解析对象\n\n\n##### beforeFirstAppMount\n* 第一个app mount前触发\n* 参数：`(config: AppConfig) => {}` app配置数据\n    \n##### firstAppMounted\n* 第一个app mount后触发\n* 参数：`(config: AppConfig) => {}` app配置数据，具体详细描述见`beforeFirstAppMount事件`\n    \n##### noAppchange\n* 无app change事件,管理当前app没有变化的状态，当前状态仅在容器第一次app无change状态触发\n* 参数：`--`\n    \n##### appChange\n* app change事件\n* 参数：`(activeApps: {appName: appConfig}, oldActiveApps: {appName: appConfig})`, appConfig具体详细描述见`beforeFirstAppMount事件`\n\n#### 3.1.3 slots\n##### appError\n\n* app资源错误是渲染的组件\n* 默认值： `<div>404, 该路由没有匹配的app</div>`\n\n\n##### loading\n\n* app资源加载中、渲染之前的loading时组件渲染\n* 默认值：`<div>loading</div>`\n\n\n##### appNotFound\n\n* 当前路由没有匹配的app的组件渲染\n* 默认值：`<div>404, 未发现该app</div>`\n\n#### 3.1.4 appList 属性配置\n\n##### name\n* app name，用于path处理\n* 类型：`String`,\n* 默认值：`-`\n\n##### title\n* app 中文名称\n* 类型：`String`,\n* 默认值：`-`\n\n##### host\n* app 静态资源host\n* 类型：`String`,\n* 默认值：`-`\n\n##### render\n* render渲染处理，用于自定义渲染,主要针对app渲染时自定义渲染的情况，包括`iframe`、`自定义组件`渲染\n* 类型：`Function`,\n* 默认值：`-`\n\n``` html\n\n  // 使用\n  <app-router\n    :appList=\"[{\n      name: 'iframe-app',\n      title: '外链iframe',\n      render: () => <div>\n        <h3>百度页面</h3>\n        <iframe src=\"http://www.baidu.com\" width=\"100%\" height=\"300px\" style=\"border: 0\"/>\n      </div>\n    }, {\n      name: 'custom-app',\n      title: '本地自定义app',\n      render: () => <div>\n        <h3>我是一个图标自定义app</h3>\n        <fe-line-chart :option=\"{}\"></fe-line-chart>\n      </div>\n    }]\">\n  </app-router>\n  \n```\n\n\n##### activeRule\n* 当前app激活时满足的路由状态，用于处理特殊app中的特殊场景激活的状态，该规则会覆盖原有的默认激活方式，即`name`和`pathBase`失效\n* 类型：`Function`,\n* 默认值：`-`\n\n##### isActive   \n* 当前app是否激活状态\n* 类型: `Boolean`\n* 默认值: false\n\n##### apiRule \n* app调用api前缀,前缀中会默认识别`{name}`,并将`{name}`替换为当前app name，该参数如果不设置，会默认继承`app-router`中`apiRule`参数\n* 类型: `String`\n* 默认值: '/{name}-api'\n\n#### wsEvRule\n* app使用websocket时，为app转发app的ws事件处理签注,前缀中会默认识别`{name}`,并将`{name}`替换为当前app name\n* 类型：`String`\n* 默认值：`{name}/`\n\n##### pathBase\n* 当前路由下注册的router前缀，该参数如果不设置，会默认继承`app-router`中`pathBase`参数\n* 类型: `String`\n* 默认值: ''\n\n##### customProps\n* 该参数会为当前app设置自定义属性,该参数如果不设置，会默认继承`app-router`中`customProps`参数,具体使用形式与[app-router customPros类似](#customprops)\n* 类型: `String, Function, Array, Object, Promise`\n* 默认值: `-`\n\n``` html\n<app-router\n  :appList=\"[{\n    name: 'alive-app',\n    title: 'aliveapp',\n    host: 'http://localhost:1999',\n    customProps: {\n      getToken () {\n        // 返回当前的localStorage中的token数据\n        return window.localStorage.getItem('token')\n      }\n    }\n  }, {\n    name: 'static-app',\n    title: 'staticapp',\n    host: 'http://localhost:1998'\n  }]\">\n</app-router>\n```\n\n### 3.2 appHistory\n\n提供手动切换不同应用的方法，该方法主要用于在主工程中切换不同的app。\n\nappHistory对history api进行了简单封装，主要暴露了两个方法`push`和`replace`\n\n``` js\nimport { appHistory } from 'fe-micro-main'\n```\n\n#### appHistory.push\n\n* 类型：function\n* 代码示例：\n\n``` js\n    appHistory.push('/home')\n```\n\n#### appHistory.replace\n\n* 类型：function\n* 代码示例：\n\n``` js\n    appHistory.replace('/home')\n```\n\n## 注意：\nsandbox 目前内部沙箱仅使用了主流浏览器的proxy方式对全局变量进行拦截处理，实现内部沙箱机制。但是对于部分低版本浏览器，以及IE支持不够友好，所以对于需要支持低版本浏览器的项目，建议引入proxy polyfill\n* [cdn](https://unpkg.com/proxy-polyfill@0.3.2/proxy.min.js)\n* [npm](https://www.npmjs.com/package/proxy-polyfill)\n","readmeFilename":"README.md"}