By yugasun from yugasun.com/post/you-ma… This article can be reproduced in full, but the original author and source need to be retained.
I met a plug-in
Although vue.js is powerful enough, in actual development, we still need to introduce various modules to fulfill our functional requirements, or add some global functionality to the global Vue object, and the Vue plug-in is to help us do this work.
Developing a plug-in
There is no limit to the range of Vuejs plug-ins. There are generally the following types:
- Add global methods or attributes, such as vue-custom-element
- Add global resources: directives, filters, transitions, etc., such as vue-touch
- Add some component options, such as vue-router, through the global mixin method
- Add Vue instance methods by adding them to
Vue.prototype
On the implementation. - A library that provides its own API and provides one or more of the features mentioned above, such as vue-Router
The Vuejs plug-in should have a public method install, which takes a Vue constructor as its first argument and an optional configuration object as its second argument, written as follows:
MyPlugin.install = function(Vue, options) {
// 1. Add a global method or attribute
Vue.myGlobalProp = 'yugasun';
Vue.myGlobalMethod = function() {
/ / logic
};
// 2. Add global resources:
Vue.directive('my-directive', {
bind(el, binding, vnode, oldVnode) {
/ / logic}});// 3. Inject generic methods or properties into components
Vue.mixin({
data(){
return {
// Common data,
};
},
created() {
/ / logic}});// 4. Add instance methods
Vue.prototype.$myMethod = function(methodOptions) {
/ / logic
};
};
Copy the code
The use of plug-in
Plugins are easy to use, just import and call vue.use () :
import Vue from 'vue';
import MyPlugin from './MyPlugin';
Vue.use(MyPlugin, {someOption: true});
Copy the code
The development of component
The vue-axios-plugin, for example, is a re-wrapped axiOS plug-in that makes it easy to call the request method directly in a project via this.$http.get/ POST.
First, create the entry file vue-axios-plugin.js based on the template above:
const VueAxiosPlugin = {}
VueAxiosPlugin.install = (Vue, options) = >{}export default VueAxiosPlugin
Copy the code
Then add the instance method to 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) = > {
letaxiosOpt = { ... options, ... {method: 'get'.url: url,
params: data
}
}
return service(axiosOpt);
},
post: (url, data, options) = > {
letaxiosOpt = { ... options, ... {method: 'post'.url: url,
data: data
}
}
returnservice(axiosOpt); }}}export default VueAxiosPlugin
Copy the code
For details on how to use Axios, see the official axios documentation
Now that the basic development of the plug-in is complete, test it in the project:
import VueAxiosPlugin from './vue-axios-plugin'
Vue.use(VueAxiosPlugin)
Copy the code
Then you can use the added global methods directly in your component:
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()
}
})
Copy the code
Release the component
The plugin is already written and you can copy the file and reuse it in different projects. If copying the file every time is a hassle, you can simply add the plug-in file directly to the project template by reading the previous custom development project template article. Of course, if your plugin is good enough, you can publish it to the NPM community and make it available to fellow programmers all over the world.
Emergency project at a time, there is a demand is hard to get, we will think out in search of the items we need, now that we got so much from the community, of course, also want to learn to be grateful, occasionally try to return, not how high the quality of the code, even if it is simply to help modify a errors in the documentation, it is also a contribution, Maybe this change of yours will save someone a half day of their time. Any project grows iteratively.
Feel free to contribute your first source code to GayGithub, the world’s largest gay dating site
The source code in this
Project directory
You-May-Not-Know-Vuejs