@[toc]最近在记录TienChin项目，其中涉及到Vue中插件的定义，所以特整理这篇文章教大家如何在Vue3中定义插件。掌握了这个技能，就可以看懂TienChin的前端代码了。1、Vue插件在Vue中，我们可以直接将一些简单的函数定义为全局方法，然后挂在Vue上使用。比如在vhr中，我们封装了网络请求方法，然后挂在Vue.prototype上就可以这样：import{postRequest}from"./utils/api";Vue.prototype.postRequest=postRequest;然后你可以在你使用它的地方使用this.postRequest。需要的小伙伴注意，这个在Vue3中有变化，原型变成了config.globalProperties，即如果要在Vue3中挂载全局方法，应该是constapp=createApp(App);app.config。全局属性。useDict=这种形式的useDict（我会在TienChin项目中和大家讨论）。这也是一种定义插件的方式，但是这一般适用于一些工具和方法，一些比较复杂的插件是无法定义的。复杂的插件还是要通过Vue中提供的插件定义方法来定义。2.自定义插件2.1基本使用首先我们为我们的插件新建一个目录plugins，然后在该目录下新建一个index.js文件用于开发插件，内容如下：exportdefault{install:(app,options)=>{console.log("我的第一个插件")}};install中的方法会自动执行。接下来，我们可以在main.js中引入我们的插件：constapp=createApp(App);从'./plugins'导入插件app.use(plugin);app.use表示引入插件，引入插件后，会自动执行插件中的install方法。app.use方法接收两个参数。第一个参数是我们导入的插件js对象，第二个参数是可选的。可以看到定义插件时的install方法有两个参数。第一个参数是Vue实例自动传入的，第二个参数options是通过app.use中的第二个参数传入的。当然，在上面的例子中，宋哥并没有传第二个参数。好了，这样配置之后，接下来启动项目，可以看到控制台打印了日志。这样的插件太简单了，接下来我们就给这个插件补充一些素材。2.2添加组件首先我们定义一个新的组件，如下：然后我们现在可以在插件中将这个组件注册为全局组件，如下：importMyBannerfrom"@/plugins/components/MyBanner";exportdefault{install:(app,options)=>{console.log("我的第一个插件")app.component('my-banner',MyBanner);}};先在插件中导入这个组件，然后通过app注册这个组件。注册完成后，我们就可以在项目的任意位置使用my-banner组件，如下：
最终展示效果如下：2.3添加指令我们甚至可以在插件中注册一条指令，如下：importMyBannerfrom"@/plugins/components/MyBanner";exportdefault{install:(app,options)=>{console.log("我的第一个插件")app.component('my-banner',MyBanner);app.directive("字体大小",(el,binding,vnode)=>{varsize=16;switch(binding.arg){case"small":size=16;休息;案例“大”：大小=32;休息;默认值：大小=48；休息;}el.style.fontSize=size+"px";});}};现在，我们可以随时随地在项目中使用这个指令，比如在我们刚刚自定义的my-banner中使用这个指令：我们甚至可以动态传递在命令中通过选项设置字体大小，如下：importMyBannerfrom"@/plugins/components/MyBanner";exportdefault{install:(app,options)=>{console.log("Myfirstplugin")app.component('my-banner',MyBanner);app.directive("font-size",(el,binding,vnode)=>{varsize=16;switch(binding.arg){case"small":size=options.small;break;case"large":size=options.large;break;default:size=options.defaut;break;}el.style.fontSize=size+"px";});}};options是插件注册时传入的JSON参数。small、large和default对应的字体大小取决于插件注册时传入的值：constapp=createApp(App);importpluginfrom'./plugins'app.use(plugin,{small:16,大:32,默认:48});第二个参数，大家可以看到，就是options参数的值现在想想我们平时使用ElementUI的时候，Vue.use方法，传入ElementUI，然后传入一些其他的参数。看完上面的例子，大家就明白ElementUI的引入方法是什么了。2.4provide&inject在插件中，也可以通过provide提供一个方法。在需要使用方法的地方，通过inject注入方法，然后就可以使用了，如下：importMyBannerfrom"@/plugins/components/MyBanner";exportdefault{install:(app,options)=>{console.log("我的第一个插件")app.component('my-banner',MyBanner);app.directive("font-size",(el,binding,vnode)=>{varsize=16;switch(binding.arg){case"small":size=options.small;break;case"large":size=options.large;break;default:size=options.defaut;break;}el.style.fontSize=size+"px";});constclickMe=()=>{console.log("==========clickMe=========")}app.provide('clickMe',clickMe);}};需要用在什么地方通过inject方法注入后即可使用，如下：
