文章目录
1. 重点提炼
- 插件
- Vue.use
- 传入一个函数或者一个包含有 install 方法的对象
- 扩展 Vue、Vue实例（组件实例）的功能
- mixin
- Vue.use
2. 引例
其实后面要讲述的路由、状态管理都会用到插件，插件是开发过程中大概率会用到的内容。
插件实际很简单，目的就是为了扩展vue功能，提供了一种规则的写法去扩展vue的功能。
组件是Vue的实例，Vue其实本质就是构造函数。
我们自己可以给Vue组件扩展功能（不通过插件，在prototype下追加）。
2.1 example01-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="fn">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.prototype.getName = function() {
console.log('abcd');
};
let app = new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log(this);
}
}
});
</script>
</body>
</html>
参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.52
Branch： branch04commit description：a1.52（example01-1——vue的proptotype下扩展功能）
tag：a1.52
2.2 example01-2
可以直接调用扩展的方法。
let app = new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log(this);
this.getName();
}
}
});
参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.53
Branch： branch04commit description：a1.53（example01-2——调用vue的proptotype下扩展功能）
tag：a1.53
以上的扩展比较随性，Vue推荐如果我们对其进行扩展，最好按照它的规范来，即为给Vue写插件。
3. 插件
插件通常是用来给 vue 提供扩展功能的一种方式
- 给
Vue添加属性和方法 - 给
Vue 实例添加属性和方法 - 添加全局资源：指令、过滤器、组件等
- 添加配置选项
4. 安装插件
类似koa中的户注册中间件，而这里插件其实就是函数，使用use方法实际就是调用该函数。
通过全局方法 Vue.use() 使用插件。它需要在调用 new Vue() 启动应用之前完成。
Vue.use(插件);
如果插件是一个对象，必须提供 install 方法。
如果插件是一个函数，它会被作为 install 方法。
install 方法调用时，会将 Vue作为参数传入。
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
5. 实例
axios
https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js
function http(_Vue, options) {
_Vue.prototype.$http = axios;
}
Vue.use(http);
// or
function http(_Vue, options) {
_Vue.prototype.$http = adaptor.http;
}
Vue.use(http, {
adaptor: axios});
new Vue({
el: '#app',
data: {
},
async created() {
// let rs = await axios({
// method: 'post',
// url: 'https://api.apiopen.top/musicRankings'
// });
// console.log(rs);
let rs = await this.$http({
method: 'post',
url: 'https://api.apiopen.top/musicRankings'
});
console.log(rs);
}
});
修改
prototype会修改整个Vue原型链
另外一种方式
function http(_Vue) {
_Vue.mixin({
beforeCreate() {
if ( this.$options.adaptor ) {
this.$http = this.$options.adaptor;
}
if ( this.$options.parent && this.$options.parent.$http ) {
this.$http = this.$options.parent.$http;
}
}
});
}
Vue.use(http);
new Vue({
el: '#app',
adaptor: axios,
components: {
'my-component': myComponent
}
})
6. example02
6.1 example02-1
为vue写插件封装成一个js文件
vue提供了一个use方法，这个有点像之前我们所学的React-Redux中间件一样。
插件其实就是我们写的一个函数，把函数传进use方法中（相当于注册插件），它就会执行这个函数，我们在这个函数当中为其扩展功能就行，同时把Vue当作参数传过去。
\js\me.js
// Vue.use 使用，会执行插件函数，同时把Vue当作参数传过去。
function me(_Vue) {
_Vue.prototype.getName = function() {
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
}
}
插件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="fn">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script src="./js/me.js"></script>
<script>
Vue.use( me );
let app = new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log(this);
this.getName();
}
}
});
</script>
</body>
</html>
参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.54
Branch： branch04commit description：a1.54（example02-1——注册插件）
tag：a1.54
6.2 example02-2
Vue.mixin 注入组件选项
mixin 接受一个对象，该对象会被注入到 vue 实例配置中
组件有一个生命周期是created，mixin 中的对象也是一个组件配置，我们在其内创建一个created生命周期，它也会注入到Vue中，与Vue的created生命周期相合并，但并不是覆盖。
即把插件配置对象合并到组件的配置选项当中了。
注意不是覆盖，而是存在多个，而且在这里混合进去的选项是优于组件自己本身的生命周期（插件会先执行）。
因此可以在created函数中做很多事情，比如在每个插件的created中增加功能，其优先级比原组件高。
其实后面学到的路由就是利用这种机制进行注册的。
\js\me.js
// Vue.use 使用，会执行插件函数，同时把Vue当作参数传过去。
function me(_Vue) {
_Vue.prototype.getName = function() {
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
}
// mixin 接受一个对象，该对象会被注入到 vue 实例配置中
Vue.mixin({
created() {
console.log('me-created');
}
});
}
插件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="fn">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script src="./js/me.js"></script>
<script>
Vue.use( me );
let app = new Vue({
el: '#app',
data: {
},
created() {
console.log('created');
},
methods: {
fn() {
console.log(this);
this.getName();
}
}
});
</script>
</body>
</html>
参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.55
Branch： branch04commit description：a1.55（example02-2——注入组件选项）
tag：a1.55
（后续待补充）