开发迭代方案
该架构支持 React、Vue、Angular、原生 Javascript 等前端框架和第三方任何应用的接入，但都需要安装指定包，目前已完成 React、Vue、原生 Javascript 包的实现，可以访问 NPM 仓库 通过 lsswp-cli 命令，按照官方文档安装。
开发步骤
- 访问 NPM 仓库 ，安装
lsswp-cli命令，下载对应脚手架前端工程，确认src/config.js里的 SERVICEID 和 SERVICENAME 配置是否正确 - 根据项目实际需求，配置路由
src/router/components.js、菜单src/router/router.js、HTTP 请求代理地址/config/index.js，准备各路由所对应的文件（例如：src/views/home.js请根据业务模块命名），分配给项目成员实现 - 项目成员根据业务需求，安装指定公共组件，进行开发
- 访问 可视化接口管理工具 配置 mock 数据
- 服务端实现 RESTful 接口，并维护接口文档
- 调试服务端接口
- 测试
注意事项
原则
-
api/*.js 所有 js 都用驼峰命名，并且内部注释该 js 功能，删除未用 js；
-
根据业务模块来划分 views，并且将 views 和 api 两个模块一一对应，方便维护；
-
独立的东西，没有必要使用 vuex 来存储 data，每个页面里存放自己的 data 就行。但如登录 token，用户信息，或者是一些全局个人偏好设置等，还是用vuex管理更加的方便，具体还是要结合业务场景；
-
后端返回前端的数据，字段名同数据库中的字段名，并转为小写字母开头的驼峰式命名，构造 mock 数据时也要注意这一点；
-
工程编译时，src 目录下的 lib、assets 目录下的文件会被直接复制到 dist 目录下；
-
@ 是 src 的别名，在程序中引入路径的时候，@/utils/request就直接可以代替../src/utils/request；
-
为了便于维护，对话框、页签等如果里面的内容比较多（超过30行），要独立成 vue 组件，尽量不要让一个 vue 组件的代码太多（超过500行超过20K）,尽量把 vue 文件里的 js 移到单独的文件，便于使用编辑器的 js 校验 js 格式化功能。vue 文件中 css 代码行数较多时（超过50行），亦可将 css 移到单独的 css 文件。模板部分要保持在 vue 文件里，以使用 Vetur 插件的模板语法校验功能；
-
使用 VSCode 作为 js/vue 的编辑器，并安装以下插件 EditorConfig for VSCode , Prettier-Standard - JavaScript formatter , JavaScript Standard Style , stylefmt , Vetur；
-
在 VSCode 的配置里要加下面的命令，格式化时使用单引号而不是双引号和防止自动加分号："prettier.singleQuote": true,"prettier.semi": false
-
安装并配置 ESLint（可组装的JavaScript和JSX检查工具，保持团队代码规范统一），依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件，添加如下配置
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.options": {
"plugins": [
"html"
]
},
"eslint.autoFixOnSave": true,
如何定义全局方法或变量
子应用创建的全局方法或变量，都要放到子应用ID的命名空间下，例如：
import {SERVICEID} from './config.js'
let ns = window[SERVICEID] = window[SERVICEID] || {}
ns.foo = { bar: 'val1', baz: 'val2'}
ns.qux = (a, b) => {}
如何使用 sessionStorage/localStorage/cookie
在脚手架工程下提供 sessionStorage 的前后端操作库(src/utils/storage.js)，接管 sessionStorage 操作。
import {SERVICEID} from './config.js'
import SessionStorage from './utils/storage.js'
SessionStorage.setServiceId(SERVICEID) // 设置子应用id
SessionStorage.setItem('foo', 'value')
在脚手架工程下提供localStorage的前后端操作库(src/utils/storage.js)，接管localStorage操作。
import {SERVICEID} from './config.js'
import LocalStorage from './utils/storage.js'
LocalStorage.setServiceId(SERVICEID) // 设置子应用id
LocalStorage.setItem('foo', 'value')
在脚手架工程下提供cookie的前后端操作库(src/utils/cookies.js)，接管cookie操作。
import { SERVICEID } from './config.js'
import Cookies from './utils/cookies.js'
// 操作 Cookies 是往浏览器 LocalStorage 里存值，通过 key 来区分，为了防止多个子应用设置 cookies 超量
Cookies.setServiceId(SERVICEID) // 设置子应用id
Cookies.set('name', 'value'); // 永不过期
Cookies.set('name', 'value', { expires: 7 }); // 过期时间7天
Cookies.get('name'); // => 'value'
Cookies.remove('name');
Cookies.get('name'); // => undefined
如何跨子应用数据交互
- 在
index.js里定义了portal.global为一个Observable实例，Observable是订阅/发布模式的实现，所以portal.global支持get、set、subscribe、unsubscribe等方法
function callback(value, path) {
console.log(value, path);
}
portal.global.set('foo', { bar: 'value' }) // 改变属性foo的值
portal.global.set('foo.bar', 'newValue') // 改变属性 foo.bar的值
portal.global.get('foo') // 获取属性foo 的值
portal.global.get('foo.bar') // 获取属性bar 的值
portal.global.subscribe('foo', callback) // 监听foo属性的改变
portal.global.subscribe('foo.bar', callback) // 监听bar属性的改变
portal.global.unsubscribe('foo', callback) // 停止监听 foo 属性的改变
portal.global.unsubscribe('foo.bar', callback) // 停止监听 bar 属性的改变
- 子应用可以在bootstrap生命周期函数中声明自己的跨服务数据项。声明方式类似于：
portal.global.set("form.count",1)
- 其他子界面可以在自己的bootstrap生命周期函数中声明要监听跨服务业数据项。声明方式类似于：
portal.global.subscribe("form.count",function(value, path){
//获取value做相应动作
});
如何链接跳转
- 子应用里的链接要设置属性target="_blank"，使页面在新窗口打开；
- 集成页面的js会遍历没有设置属性为target="_blank"的链接，并禁止这些链接在当前窗口打开。
全局样式规范
在集成页面已经引入 element-ui，并且会对 element-ui 样式作统一调整，因此所有子应该尽量使用 element-ui 样式，并且不要自己再引入 element-ui。参见 element-ui 文档 http://element.eleme.io ，当然也可以使用其他 UI 框架。
