我的博客
这篇文章少了图片(本地找不着了),可以在上面的链接中看到
模块联邦sdk化,免构建、热更新、工具链无关的微模块方案
文档
开发远程 vue 组件
####克隆模板库
克隆远程 vue 组件模板项目为rvc-xxx
(名字请按实际需要修改,此处仅做示例)
https://github.com/hel-eco/hel-tpl-remote-vue-comp
改 package.json
将name
和appGroupName
改为 hel 模块组名
"name": " rvc-xxx",
"appGroupName": " rvc-xxx",
开发组件
在src/components
目录下新增组件,并src/components/index
文件里导出即可
例子
像是这里已经发布的一个版本(已打包):
link
我这里只修改了:
src/components/index.js
:
/*
|--------------------------------------------------------------------------
|
| 这些组件暴露给使用方
|
|--------------------------------------------------------------------------
*/
import App from './App.vue';
import HelloWorld from './HelloWorld.vue';
import Button from '@/components/button.vue'
import add from './tools'
export default {
App,
HelloWorld,
Button,
add
};
src/components/button.vue
:
src/components/tools/index.js
:
export default {
add: function (a, b) {
return a + b
}
}
然后:
npm build
npm publish
即可,但是推送可能会有一定延迟
上面的例子是可以被调用的,这里写了一个button,一个add的方法
注意
在build之前改版本号
build之后的生成物是个版本号有关系的,如果版本号冲突,是无法推送的
我这里使用的例子:
link
会在上面的代码基础上进行增加并调用自己的远程库:
这里我在需要展示的vue文件中:
{{ msg }}
你好
下面这个是远程组件
下面这个是我自定义的组件
下面这个是我的第二个组件
上面这个是远程组件
+
={{ c }}
这里调用function
目前是点击时触发加载,第一次加载时会比较慢
这里的组件:dtlib
,comps
是本地已经安装的
这里是在使用到的组件中单独引入