我要评论vue.js插件开发
vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插件的用途很广泛，从全局，到为应用添加一些额外的功能、如路由(vue router)，存储在应用程序里的不可变数据(vuex)。
一般来说，vue插件的开发是非常简单的。vue插件仅仅是包含一个公开方法install的对象、这个方法有两个参数：vue 构造器和一个可选的选项对象。尽管，插件看起来十分简单，但其仍然可以产生相当大的作用。
你的第一个插件
为了打开vue插件开发的大门，下面我们将先实现一个最简单的插件。这个插件的功能是：当组件被挂载到dom后，控制台输出mounted!。
// 这是你的插件对象。 它可以导出到任何地方使用。
const myplugin = {
// install方法是必需的
// 包含两个参数：vue 构造器，一个可选的选项对象
install(vue, options) {
// 使用minxin将功能注入所有组件
vue.mixin({
// 添加到mixin中的任何内容将被注入到所有组件中。
//在这个例子中， mounted() 方法将在组件被挂载到dom后调用
mounted() {
console.log('mounted!');
}
});
}
};
export default myplugin;
现在，你的插件便可以使用了。你可以通过导入并用vue.use来显式调用你的插件：vue.use(myplugin)
import vue from 'vue'
import myplugin from './my-vue-plugin.js'
import app from './app.vue'
// 在这里显式调用插件
vue.use(myplugin)
new vue({
el: '#app',
render: h => h(app)
});
你可能会奇怪，为什么我不能直接在main.js中调用vue.mixin()来实现这一点呢？其原因就是：我们向vue添加全局功能，而没有直接修改应用逻辑。拆分模块这种做法总是极好的，你可以随时添加或移除一个单独的模块。同时，这也使得插件非常容易分发。
添加一些其他的功能
安装应用范围的组件和指令
如果你想把组件或指令打包为一个插件来进行分发，可以这样写：
import mycomponent from './components/mycomponent.vue';
import mydirective from './directives/mydirective.js';
const myplugin {
install(vue, options) {
vue.component(mycomponent.name, mycomponent)
vue.directive(mydirective.name, mydirective)
}
};
export default myplugin;
修改vue构造器
你可以在插件中以你期待的方式来修改vue构造器(全局vue对象)。下面的代码在vue构造器中添加了一个属性myaddedproperty和一个方法myaddedmethod。
const myplugin {
install(vue, options) {
vue.myaddedproperty = 'example property'
vue.myaddedmethod = function() {
return vue.myaddedproperty
}
}
};
export default myplugin;
修改vue实例
不需要任何注入机制便可以将属性或方法直接添加到组件实例，你可以这样来修改vue构造器的prototype：
const myplugin {
install(vue, options) {
vue.prototype.$myaddedproperty = 'example property'
vue.prototype.$myaddedmethod = function() {
return vue.myaddedproperty
}
}
};
export default myplugin;
这些属性将会被加到所有的组件和vue实例中。
社区里公认的做法是：添加在vue prototype里的任何属性都要以美元符$作为其前缀
添加组件的生命周期钩子或属性
如上文中“你的第一个插件”示例所示，你可以通过mixin添加生命周期钩子对vue组件进行修改。
const myplugin = {
install(vue, options) {
vue.mixin({
mounted() {
console.log('mounted!');
}
});
}
};
export default myplugin;
mixin是一个相当重要的话题，但不在本文的讨论范围之内。目前，可以肯定的是，mixin是一种灵活的分布式复用 vue 组件的方式，mixin可以包含任意组件选项并可以混合进其他组件之中。
自动安装插件
对于那些没有在应用中使用模块化系统的用户，他们往往将通过 <script> 标签引用你的插件，并期待插件无需调用vue.use()便会自动安装 。你可以在插件最后添加如下几行代码来实现自动安装：
// 如果vue是全局对象自动安装插件
if (typeof window !== 'undefined' && window.vue) {
window.vue.use(myplugin)
}
发布你的插件
如果你已经写了一个插件，并准备将其分享到社区，下面是一些常用的帮助别人发现你的插件的方法，如果你还不熟悉这些流程的话。
选择一个合适的开源协议，然后将发布到npm和github。
向awesome-vue提交pr。很多人会来这里寻找插件。
(其他)vue，vue gitter channel，或者在twitter上@#vuejs。
赶快去开发一些插件吧！
</script>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论