VUE3教程：科技直男如何一步步带妹子搭建外挂？

作者：Shadeed译者：前端小智来源：learnvue有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。插件是向Vue应用程序添加可重用功能的好方法。凭借大量现有的组件、路由等插件，Vue的生态系统为许多常见用例提供了解决方案。一些常用的插件是vue-router、vuecustom-element和vue-touch。但是，总会有插件不能满足我们需求的时候，我们需要写一个插件来满足产品的口味。在本教程中，让我们学习构建自己的Vue3插件。我们可以用Vue插件做什么？简而言之，Vue插件允许我们将任何类型的功能提取到它自己包含的代码中，这些代码可以在不同的项目中重复使用。通常，它们用于向Vue应用程序添加全局级别的功能。根据Vue文档，这里有一些最常见的插件用法。添加全局组件添加全局指令、transitions或者它们的资源使用全局mixins添加组件选项（比如vue-router）为Vue实例添加附加属性（通过app.config.globalproperties）接下来我们一一讲，先创建我们的第一个插件。创建我们的Vue3插件在本教程中，我们将创建一个插件来添加UI元素和样式，以便我们将其添加到我们的应用程序中。我们创建一个名为MyPlugin.js的文件，并在其中创建一个带有安装方法的导出默认值。这个方法有两个参数：app-Vue的createApp生成的app对象options-用户传入的选项//MyFirstPlugin.jsexportdefault{install:(app,options)=>{//TODO}}然后，依次将此插件插入Vue应用程序，进入main.js文件并使用app.use()。//main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importMyFirstPluginfrom'./plugin'constapp=createApp(App)app.use(MyFirstPlugin,/*optionscanbepassedas第两个参数*/)app.mount('#app')这个是必须的，我们来做前期工作。从Vue插件添加全局组件Vue插件的一个重要用途是添加可以在Vue项目中的任何地方使用的全局组件，而无需每次都导入。使用app参数，我们可以使用app.component语法声明全局组件。通过使用app.component我们可以使用单文件组件或者直接在js文件中声明我们的组件。假设我们要创建一个标题组件(MyHeader.vue)-它包含有关文章的信息。回到MyFirstPlugin.js并将其添加到我们的插件中。//MyFirstPlugin.jsimportMyHeaderfrom'./components/MyHeader.vue'exportdefault{install:(app,options)=>{/*声明全局组件*/app.component('my-header',MyHeader)}}现在，我们可以在任何地方使用MyHeader，因为它是全局注册的。例如，在App.vue中使用。无需导入，只需将其添加到模板中即可。MattMaribojoc运行结果：我们还可以给这些组件添加样式如果我们给组件添加任何非scope的样式，我们可以直接在组件内部设置。例如，如果我们想改变整个项目的字体大小和背景颜色，我们可以在MyHeader组件中进行。运行后：使用Vue插件添加全局指令我在Vue中使用最多喜欢创建自己的指令的能力。指令是Vue允许开发人员直接编辑DOM的一种方式。例如v-if、v-show、v-bind等。有了插件，我们可以很容易地使用app.directive创建指令，并在多个项目中使用它们。简而言之，我们要采用指令参数，确定元素的字体大小，然后更改元素的样式（通过el）以使用适当的大小。//MyFirstPlugin.jsexportdefault{install:(app,options)=>{app.component('my-header',MyHeader)app.directive("font-size",(el,binding,vnode)=>{varsize=16;switch(binding.arg){case"small":size=12;break;case"large":size=24;break;default:size=18;break;}el.style.fontSize=size+"px";})}}然后，在App.vue或任何组件中，因为它是全局可用的，所以我们可以像这样使用指令。MattMaribojoc运行后：使用插件选项提供自定义向插件添加选项是使插件更灵活地适应不同用例的好方法。假设我们希望开发人员能够控制小、中、大参数的确切大小。回到main.js，我们可以向app.use函数添加第二个参数：//main.jsapp.use(MyFirstPlugin,{fontSize:{small:12,medium:24,large:36}})然后，返回对于我们的插件，我们可以使用选项对象来提取传递给插件的任何内容，而不是对我们的字体大小进行硬编码。//MyFirstPlugin.jsapp.directive("font-size",(el,binding,vnode)=>{varsize=16;switch(binding.arg){case"small":size=options.fontSize.small;break;case"large":size=options.fontSize.large;break;default:size=options.fontSize.medium;break;}el.style.fontSize=size+"px";});运行后：使用Mixins添加向Vue应用程序添加可重用功能的常用方法是使用Vuemixins。Mixins是一种向Vue组件添加组件选项的方法。我们可以添加任何组件选项，如生命周期挂钩、数据和方法，如果组件使用此mixin，这些选项将与该组件的选项合并。了解这些选项的组合方式很重要。例如，mixin生命周期钩子将在组件钩子之前被调用，如果存在命名冲突，组件数据将优先于mixin数据。我们可以使用app.mixin方法创建一个全局混合。假设我们想要添加一个创建挂钩，它只是将日志语句打印到我们的控制台，并且想要提供一个数据属性，该属性提供一个我们可以用来更改href属性的外部URL。//MyFirstPlugin.jsexportdefault{install:(app,options)=>{app.mixin({data(){return{featuredLink:'https://learnvue.co'}},created(){console.log("Printingfromcreated.")},})}}在我们使用的任何组件中，created挂钩将运行，我们可以访问我的featuredLink属性。两份打印-一份用于app.vue，一份用于myheader.vue在插件中使用Provide和Inject一种让特定组件访问不同属性和方法的强大方法是使用Vue中的provide和inject模式。这允许我们的插件“提供”一个属性或方法，并允许任何组件“注入”该值。让我们看一个例子，我们创建一个注销方法。我们不需要此方法对每个组件都可用，但我们只想创建一个注销方法，以便将来更容易修改。在我们的插件中，我们声明我们的方法并调用app.provide以将其提供给我们应用程序的其他部分。//MyFirstPlugin.jsimport{provide}from'vue'exportdefault{install:(app,options)=>{constlogout=()=>{console.log('Logoutisbeingcalled')}app.provide('logout',logout)}}然后，在任何组件中，我们可以注入这个方法并创建一个调用注销方法的按钮。MattMaribojoc运行后，你会看到每当我们点击按钮时，logout中的内容都会被打印出来。总结设计自己的Vue3插件的可能性是无穷无尽的。希望这篇文章能帮到你。~最后，我是小智。写完这篇文章的时候，我生病了，准备去会所散心。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://learue.co/2021/06/bui...交流有梦想，有干货，微信搜索【大招天下】关注这位还在早期洗碗的洗碗智慧早晨。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。