虽然 Vue.js 已经足够强大了,但是在实际开发中,我们还是需要引入各种模块来实现我们的功能需求,或者给全局的 Vue 对象添加一些全局功能,而 Vue 插件
就是来帮助我们完成这项工作的。
Vuejs 插件范围没有限制,一般有以下几种:
Vue.prototype
上实现。
Vuejs 插件应当有一个公开方法 install
,这个方法的第一个参数是 Vue
构造器,第二个参数是一个可选的配置对象,书写方式如下:
MyPlugin.install = function(Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalProp = 'yugasun'; Vue.myGlobalMethod = function() { // 逻辑 }; // 2. 添加全局资源: Vue.directive('my-directive', { bind(el, binding, vnode, oldVnode) { // 逻辑 } }); // 3. 注入通用方法或属性给组件 Vue.mixin({ data(){ return { // 通用数据, }; }, created() { // 逻辑 }, }); // 4. 添加实例方法 Vue.prototype.$myMethod = function(methodOptions) { // 逻辑 }; };
插件使用起来很简单,只需要引入,然后通过调用 Vue.use()
方法就行了:
import Vue from 'vue'; import MyPlugin from './MyPlugin'; Vue.use(MyPlugin, {someOption: true});
我们这里以 vue-axios-plugin
为例,它是一个对 axios
二次封装的插件,便于在项目中直接通过 this.$http.get/post
来直接调用请求方法。
首先根据上面的模板,创建入口文件 vue-axios-plugin.js
:
const VueAxiosPlugin = {} VueAxiosPlugin.install = (Vue, options) => { } export default VueAxiosPlugin
然后给 Vue 添加实例方法:
import axios from 'axios' const VueAxiosPlugin = {} VueAxiosPlugin.install = (Vue, options) => { const service = axios.create(options) Vue.prototype.$axios = service Vue.prototype.$http = { get: (url, data, options) => { let axiosOpt = { ...options, ...{ method: 'get', url: url, params: data } } return service(axiosOpt); }, post: (url, data, options) => { let axiosOpt = { ...options, ...{ method: 'post', url: url, data: data } } return service(axiosOpt); } } } export default VueAxiosPlugin
具体 axios 的使用方法,请阅读官方文档 axios
现在已经完成插件的基本开发了,在项目中测试下,:
import VueAxiosPlugin from './vue-axios-plugin' Vue.use(VueAxiosPlugin)
然后你就可以在你的组件中直接使用添加的全局方法了:
var app = new Vue({ el: '#app', data: { content: 'Sending...' }, methods: { getUserInfo() { Promise.all([ this.$http.get('http://yapi.demo.qunar.com/mock/5802/user', { id: 1 }), this.$http.post('http://yapi.demo.qunar.com/mock/5802/user', { username: 'yugasun', }, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) ]).then((res) => { console.log(res) }).catch((e) => { console.log(e) }) } }, created() { this.getUserInfo() } })
插件已经写好了,你可以复制该文件在不同的项目中复用了。如果觉得每次都复制文件比较麻烦,你可以通过阅读上一篇定制开发项目模板 文章,将该插件文件直接添加到项目模板中即可。当然如果你的插件足够好,也可以发布到 npm 社区,供全世界的程序员同胞使用。
每次项目紧急,有个需求很难搞定时,我们就会想着从 github 上搜索我们需要的项目,既然我们从社区获取了那么多,当然也要学会感恩,偶尔尝试着去回报下,不求代码有多么高的质量,哪怕是单纯地帮助修改一个说明文档中的错误,那也是一份贡献,也许你的这次修改可以帮助别人节省半天的时间,任何项目都是在不断迭代中成长的。
随时欢迎进入全球最大的同性交友网站
Gay
Github
,贡献你的第一份源代码~
源码在此