hel-micro

我的博客

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

关于

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

文档

开发并发布到npm

开发远程 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:

<template>  <div class="button">  <slot></slot>  </div></template>  <script>  
export default {  name: "button"  
}  
</script>  <style scoped>  
.button {  border-radius: 4px;  padding: 0 3px;  margin: 3px 6px;  
}  
</style>

src/components/tools/index.js:

export default {  add: function (a, b) {  return a + b  }  
}

然后:

npm build
npm publish

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

注意

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

调用(vue中)

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

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

<template>  <div class="hello">  <h1>{{ msg }}</h1>  <p>      你好  </p>  <h5>下面这个是远程组件</h5>  <RemoteComp name="loaded in codesandbox"/>  <h5>下面这个是我自定义的组件</h5>  <remoteTest/>    <h5>下面这个是我的第二个组件</h5>  <remoteTestApp></remoteTestApp>    <h5>上面这个是远程组件</h5>  <button @click="remoteClick">点击加载</button>  <br>    <input type="text" v-model="a">+  <input type="text" v-model="b">  ={{ c }}  <button @click="add">add</button>  </div></template>  <script>  
// https://github.com/hel-eco/hel-tpl-remote-vue-comp  
import comps from "hel-tpl-remote-vue-comps"  import dtlib from 'ice-test-remote'  console.log(dtlib)  
export default {  name: "HelloWorld",  components: {  RemoteComp: comps.App,  remoteTest: dtlib.HelloWorld,  remoteTestApp: dtlib.App  },  props: {  msg: String,  },  data () {  return {  a: 0,  b: 0,  c: 0  }  },  methods: {  async remoteClick () {  const helMicro = await import('hel-micro')  const lib = await helMicro.preFetchLib('hel-tpl-remote-lib', { versionId: '2.0.1' })  console.log(lib.num.random(22))  },    async add () {  const helMicro = await import('hel-micro')  const { add } = await helMicro.preFetchLib('ice-test-remote', { versionId: '1.5.2' })  // 调用自定义方法  this.c = add.add(parseInt(this.a), parseInt(this.b))  }  },  mounted () {  }}  
</script>  <!-- Add "scoped" attribute to limit CSS to this component only -->  
<style scoped>  
h3 {  margin: 40px 0 0;  
}  ul {  list-style-type: none;  padding: 0;  
}  li {  display: inline-block;  margin: 0 10px;  
}  a {  color: #42b983;  
}  
</style>

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