vue多业务线合并方案
一、依赖引入：
主业务线引入vue、vuex、公共方法、公共组件，并绑定到window对象，需要异步加载的子业务线通过window.XXX进行引入，不需要再次Import。
二、基础组件：
抽离与业务无关组件，如dialog、toast等。
三、异步加载：
- 将子业务线组件化。
- 在主业务线的配置文件中添加相关配置，如子业务线相关参数、js文件的url地址。异步注册组件：
const src = MY_JS_SRC
Vue.component(COMPONENT_NAME, (resolve, reject) => {
download(src).then((component) => {
resolve(component)
}).catch(() => {
reject()
})
})
- 动态路由：
路由配置如下：
{
path: 'pathA', // 固定路由A
component: componentA
},
{
path: 'pathB', // 固定路由B
component: componentB
},
//...
{
path: '/:name', // 按参数匹配异步组件
component: AsyncLoadComponent // 动态加载组件
}
AsyncLoadComponent基本实现：
……
created() {
this.setCurrent() // 设置当前动态路由
}，
methods: {
setCurrent() {
const name = this.$route.params.name
const component = GET_LOADED_COMPONENT // 把已经下载的component引入，可以通过vuex、也可以通过生产、消费者模式，不建议vuex存储业务无关数据
if (component) {
this.currentRouter = component
}
}
}
- 动态模板制作：
同一内容可能有不同模板支持，为了方便开发可以参考制作动态模板。
动态模板demo：
export default {
name: "dynamicTemplate",
components: {
},
props: {
template: { // 传入的模板字符串
type: String,
default: “”
}
},
data() {
templateData: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’] // 测试模板数据
},
render: function (createElement, context) {
const self = this;
const args = arguments;
this.template.replace(/TEMPLATE_DATA/g, this.templateData)
return createElement('div', {
class: ‘templateCls’,
style: {
……
},
on: {
……
}
},
[
// 编辑数据模板
Vue.compile(self.template)
.render
.apply(self.$parent, args)
]
)
}
},
}
使用模板：