index.html是什么插件,插件的定义和使用

[TOC]

>[success] # 插件的定义和使用

本章讲解一下 **vue** 里 **插件的概念** ，之前学习过 **mixin 混入** ，通过 **mixin 混入可以对一些代码逻辑进行一些封装** ，实际上呢，我们如果使用 **plugin插件** 的这种功能，可以 **对代码做更好的封装**，那么一起学习一下在**vue** 里如果做 **插件** 。

**index.html**

~~~

插件的定义和使用

// plugin 插件, 也是把通用性的功能封装起来

const myPlugin = {

/**

* 插件运行时走的逻辑，我们可以取到vue实例可以根据实例对象进行一些功能的扩展

* @param {object} app - vue实例

* @param {object} options - vue实例

*/

install(app, options){

// 全局的provide name变量，用的地方只需要inject: ['name']，就可以取到

app.provide('name', 'Dell Lee')

// 全局自定义指令

app.directive('focus', {

mounted(el){

el.focus()

}

})

// 全局混入

app.mixin({

mounted(){

console.log('mixin')

}

})

// vue全局属性扩展 app.config.globalProperties

// 扩展$sayHello这个变量，如果加$证明是对vue底层做一个扩展

app.config.globalProperties.$sayHello = 'hello world'

}

}

const app = Vue.createApp({

template: `

`

})

app.component('my-title', {

inject: ['name'],

mounted(){

console.log(this.$sayHello)

},

template: `

{{ name }}

`

})

/**

* 注册插件

* @param {object} 参数1 - 插件对象

* @param {object} 参数2 - 给插件传入的信息

*/

app.use(myPlugin, { name: 'dell' })

const vm = app.mount('#root')

~~~

**vuex** 以及 ** vue router** 都是通过 **plugin** 来进行扩展的。