vue.js 插件开发demo

2024年2月11日 175次阅读 来源: 1000copy

插件可以让开发者提供的扩展看起来像是vue自己就有的。因为插件的功能会使用Vue全局对象或者实例来调用，或者被修改从而在Vue的钩子函数内起作用。比如用于http调用的插件vue-resource被插入到vue后，可以使用:

Vue.http.get(url)

的方式使用此插件提供的服务。本文构建一个可以执行的demo，验证插件对Vue的修改，代码如下：

var get = function(a){console.log('Hello  ' +a)}
var plugin = {}
plugin.install = function(Vue) {
    if (plugin.installed) {
        return;
    }
    Vue.who = get;
    Object.defineProperties(Vue.prototype, {
        $who: {
            get() {
                return {get:get}
            }
        }
    });
    Vue.mixin({
        created: function () {
          console.log('Plugin activiated')
        }        
    })    
}
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(plugin);
}

此插件以get函数形式提供服务，可以打印一个字符串。它必须公开一个对象，此对象有一个install的方法，此方法的参数为Vue，可以在此方法内通过赋值创建全局方法，像这样：

    Vue.who = get;

或者针对vue的prototype，通过defineProperties创建实例方法：

 Object.defineProperties(Vue.prototype, {
            $who: {
                get() {
                    return {get:get}
                }
            }
        });

混入能力可以把钩子函数混入到Vue实例内：

    Vue.mixin({
        created: function () {
          console.log('Plugin activiated')
        }        
    })

此时可以使用一个文件对它测试：


<html>
  <body>
    <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
    <script type="text/javascript" src="p1.js"></script>
    <script type="text/javascript">
        var vue = new Vue()
        vue.$who.get('Vue Instance')
        Vue.who('Global Vue')
    </script>
  </body>
</html>

打开控制台，可以看到如下消息：

Plugin activiated
p1.js:2 Hello  Vue Instance
p1.js:2 Hello  Global Vue
    原文作者：1000copy
    原文地址: https://segmentfault.com/a/1190000007853784
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞