3.自研微前端

1.路由
微前端的基础之一就是解决路由，而我所面临的巨石应用是由angular1+ui.router构成的应用。
ui.router是直接引用html文件的，以此为起点，我开始探索以原项目为portal，植入子项目的做法。

在原项目中创建vue文件夹，init项目
开发时，使用代理，使子项目成为与portal相同端口的应用，解除跨域

devServer: {
    // web 服务
    noInfo: false,
    overlay: false,
    host: "127.0.0.1", port: 1024,
    clientLogLevel: "none",
    contentBase: './dist/wkframe', quiet: true/*静默*/, /*inline: true,*/
    headers: {
        'access-control-allow-origin': '*'
    }, proxy: {
        '/vue': {
            target: 'http://127.0.0.1:8080/',
            secure: false
        }
    }
}

编译时,将vue的dist包添加至portal项目的dist包，更改路由

    //webpack.dev.js
    new copyWebpackPlugin([
        {from: "static", to: "static"},
        {from: "wkframe", to: "wkframe"},
        {from: "vue/dist", to: "vue"}
    ])

    //route.js
    $stateProvider.state("vue", {
        url: "/vue",
        cache:false,
        views: {
            "content": {
                templateUrl: "/vue/index.html"
            }
        }
    })

2.数据通信
可以看到，基于此种设定的父子应用处于同一个域，而angular1并没有程序内部的状态管理，多使用浏览器缓存
因为
父子应用同域，可以使用浏览器缓存获取相互状态
路由互通，可以使用url+参数传递参数
而需要状态隔离则在子应用使用vuex进行内部状态管理（暂时没有用到）