插件的定义和使用 · vue笔记

[TOC] >[success] # 插件的定义和使用本章讲解一下 **vue** 里 **插件的概念** ，之前学习过 **mixin 混入** ，通过 **mixin 混入可以对一些代码逻辑进行一些封装** ，实际上呢，我们如果使用 **plugin插件** 的这种功能，可以 **对代码做更好的封装**，那么一起学习一下在**vue** 里如果做 **插件** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>插件的定义和使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 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: ` <my-title /> ` }) app.component('my-title', { inject: ['name'], mounted(){ console.log(this.$sayHello) }, template: `<div>{{ name }}<input v-focus /></div>` }) /** * 注册插件 * @param {object} 参数1 - 插件对象 * @param {object} 参数2 - 给插件传入的信息 */ app.use(myPlugin, { name: 'dell' }) const vm = app.mount('#root') </script> </html> ~~~ **vuex** 以及 **vue router** 都是通过 **plugin** 来进行扩展的。