前言

参照element的方式，写了个简单vue全局ui插件的代码基本组织结构，已经剥离了大部分非关键代码，应该可以一看就懂。

入口js

<code class="language-null">import Vue from 'vue'
import App from './index.vue'
import AuthUi from '@/global/authui.js'

Vue.use(AuthUi);

new Vue({
  render: h =&gt; h(App),
}).$mount('#app')
</code>

插件汇总js @/global/authui.js

<code class="language-null">//参考 https://github.com/ElemeFE/element/blob/dev/src/index.js
import Tips from '@/module/tips/1.0.0/index.js'

const components = [
    Tips
];

const install = function(Vue) {
    components.forEach(component =&gt; {
      Vue.component(component.name, component);
    });

    Vue.prototype.$tips = Tips;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' &amp;&amp; window.Vue) {
    install(window.Vue);
}

export default {
      install,
      Tips
}
</code>

组件入口js @/module/tips/1.0.0/index.js

<code class="language-null">//参考 https://github.com/ElemeFE/element/blob/dev/packages/message/src/main.js
import Vue from 'vue';
import Main from './main.vue';

let TipsConstructor = Vue.extend(Main);

let instance;
let seed = 1;

const Tips = function(options){
    if (typeof options === 'string') {
        options = {
            message: options
        };
    }
    let userOnClose = options.onClose;
    let id = 'tips_' + seed++;
    options.onClose = function(){
        Tips.close(id, userOnClose);
    };
    instance = new TipsConstructor({
        data: options
    });
    instance.id = id;
    instance.$mount();
    document.body.appendChild(instance.$el);
    return instance;
}

export default Tips
</code>

组件模板 @/module/tips/1.0.0/main.vue

<code class="language-null">&lt;template&gt;
&lt;div class="msg-mode"&gt;
    &lt;div class="msg-text text-center"&gt;tips text {{message}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
    name: 'Tips',
    data(){
        return {
            message: ''
        }
    },
    mounted(){

    }
}
&lt;/script&gt;
&lt;style lang="less" scoped&gt;

&lt;/style&gt;
</code>