vue外掛程式開發

vue外掛程式開發主要是用來實現一些全域性方法或者全域性物件。vue的外掛程式要求是實現乙個install公開方法。其中此install方法的第乙個入參是vue構造器，第二個入參是

是乙個可選的選項物件。

一、開發

以乙個alert的彈窗外掛程式為示例，alert.js;

具體**如下：

//定義乙個全域性變數alert

var alert = {}
//對alert定義乙個全域性公開方法install
alert.install = function (vue, options) = options) => 
},template:'}'
})currentvm = new alertcomponent(); // 例項化元件 
let tmpl = currentvm.$mount().$el; // 獲取元件掛載的元素 
} vue.prototype.$alert['show'] = ( = options) => )
}vue.prototype.$alert['hide'] = () => )
}}export default alert;

上面是一種基本的寫法，還可以使用object.defineproperty方法直接將寫好的物件直接賦值到vue.prototype上。

import alert from '.alert'

export default 
instance.dom = instance.vm.$el;
return instance;
}var o = ) ,
hide (retcode = 0, retmsg = 'ok', options = {}) 
}object.defineproperty(vue.prototype, '$alert', );
}}

二、使用

通過全域性方法 vue.use() 使用外掛程式，即：

import alert from '/plugins/alert'

vue.use(alert);

Vue 外掛程式開發

vue.js 的外掛程式應當有乙個公開方法 install 這個方法的第乙個引數是 vue 構造器 第二個引數是乙個可選的選項物件 myplugin.install function vue,options vue.directive my directive vue.mixin vue.proto...

vue開發外掛程式

1 新建plugin.js,檔案內容如下 import name1 from name1.vue let myplugin myplugin.install function vue,options 2.新增全域性資源 vue.directive my directive 3.注入元件選項 vue....

npm外掛程式開發 Vue外掛程式

vue init webpack npm vue ui,dependencies browserslist 1 last 2 versions not ie 8 devdependencies const path require path const webpack require webpack...