微前端——组合式应用路由分发

组合式应用路由分发：是实现微前端的一种方式，我们以npm包的形式发布组件，然后在基座按需引入。各个npm包可以由不同的团队分开开发，但是开发时也要遵循一定的规范。

一、子模块应用

1. router.js中导出路由，各个模块之间路由名称不能重复
   

2. src/index.js中导出路由
   

3. package.js中配置入口文件
   

4. package.js的其他配置
   name的名字不能有大写字母，每次发包的version版本不能重复。

5. vue.config.js中各个模块的别名不能重复
   

二、将子模块发布到npm

1. 在npm官网注册自己的账户
2. 设置npm代理
   可以先检查自己的代理 npm config get registry
   如代理不在npm，则设置代理 npm config set registry https://registry.npmjs.org//
3. 登录npm账户
   npm login 输入自己的npm用户名和密码
4. 查看当前登录用户 npm whoami
5. 发布包
   在子模块所在的目录下，打开命令行窗口执行 npm publish
   如果用户已登录则则省略1~4
6. 在npm官网查看包是否发布成功

三、基座集成各个子模块

src/router/index.js中引入子模块的路由

四、样式隔离

为避免各个子模块样式互相影响，写样式尽量用scoped隔离。
子模块公共样式需用类名隔离。

1. 在子模块router.js中增加标识
   
   2. 基座根据标识，在App.vue中监听路由变化给body中添加样式