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)
}
发布你的插件
如果你已经写了一个插件,并准备将其分享到社区,下面是一些常用的帮助别人发现你的插件的方法,如果你还不熟悉这些流程的话。
向Awesome-Vue提交PR。很多人会来这里寻找插件。
(其他) Vue论坛,Vue Gitter Channel,或者在Twitter上@ #vuejs。
赶快去开发一些插件吧!
End
作者:Joshua Bemenderfer
原文地址:creating-custom-plugins
译者:jeneser
译者GitHub:https://github.com/jeneser
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
Vue.js插件开发的更多相关文章
- Vue.js 插件开发详解
前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段 ...
- Vue.js 插件开发
Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: MyPlugin.install = function (Vue ...
- vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
- Vue.js 实战总结
最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- vue.js学习笔记
有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
随机推荐
- HBase原理解析(转)
本文属于转载,原文链接:http://www.aboutyun.com/thread-7199-1-1.html 前提是大家至少了解HBase的基本需求和组件. 从大家最熟悉的客户端发起请求开始讲 ...
- Myeclipse编辑jsp文件很卡是什么原因?
可能是配置问题,配置的时候不要把myeclipse连接到网络.否则每次编辑的时候要在网上查找,所以照成很卡.window->perferences->java->Installed ...
- Linux内核的三种调度策略
一 Linux内核的三种调度策略: 1,SCHED_OTHER 分时调度策略, 2,SCHED_FIFO实时调度策略,先到先服务.一旦占用cpu则一直运行.一直运行直到有更高优先级任务到达或自己放 ...
- LightOJ 1323 Billiard Balls(找规律(蚂蚁爬木棍))
题目链接:https://vjudge.net/contest/28079#problem/M 题目大意: 一个边界长为L宽为W的平面同时发射n个台球,运动K秒,台球碰到桌面及两(多)个台球相撞情况如 ...
- jmeter----计数器
在测试过程中,往往需要一些有一定规则的数字,这个时候,可以使用配置元件中的计数器去实现. 一.界面显示 二.配置说明 1.名称:标识 2.注释:备注 3.启动:是指计数器开始的值 4.递增:每次增加的 ...
- 第 18 章 Django 入门
当今的网站实际上都是富应用程序(rich application),就像成熟的桌面应用程序一样.Python提供了一组开发Web应用程序的卓越工具.在本章中,我们将学习如何使用Django(http: ...
- Ubuntu下Node.js开发起步之旅
因为忙其它的事,把Node.js的学习放下了快两个月了,世事变化还真快,发现很多东东都改变了,express已经升级到4.x了,变化还不小! 我原来的学习过程是在VirtualBox中安装Ubuntu ...
- 配置自己的ubuntu
终端 zsh 安装zsh apt install zsh 3 安装oh-my-zsh bash -c "$(wget https://raw.githubusercontent.com/ro ...
- jQuery.Validate.js验证大表单的优化
最近在项目中有遇到一个Form表单中有200多个标签.在提交表单时网页会出现等待时间很长,甚至会出现网页奔溃的情况. 主要的原因是因为在使用jQuery.Validate.js进行Form验证的时候会 ...
- React Native踩坑之启动android模拟器失败
报错 Could not install the app on the device, read the error above for details.Make sure you have an A ...