hel-micro

我的博客

这篇文章少了图片(本地找不着了),可以在上面的链接中看到

关于

模块联邦sdk化，免构建、热更新、工具链无关的微模块方案

文档

开发并发布到npm

开发远程 vue 组件
####克隆模板库

克隆远程 vue 组件模板项目为rvc-xxx（名字请按实际需要修改，此处仅做示例）

https://github.com/hel-eco/hel-tpl-remote-vue-comp
1

改 package.json

将name和appGroupName改为 hel 模块组名

  "name": " rvc-xxx",
  "appGroupName": " rvc-xxx",
1
2

开发组件

在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  
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

src/components/button.vue:

  
  
  
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

src/components/tools/index.js:

export default {  
    add: function (a, b) {  
        return a + b  
    }  
}
1
2
3
4
5

然后:

npm build
npm publish
1
2

即可,但是推送可能会有一定延迟
上面的例子是可以被调用的,这里写了一个button,一个add的方法

注意

在build之前改版本号
build之后的生成物是个版本号有关系的,如果版本号冲突,是无法推送的

调用(vue中)

我这里使用的例子:
link
会在上面的代码基础上进行增加并调用自己的远程库:

这里我在需要展示的vue文件中:

  
  
  
  
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

这里调用function目前是点击时触发加载,第一次加载时会比较慢
这里的组件:dtlib,comps是本地已经安装的
这里是在使用到的组件中单独引入