关键词:
作者:Shadeed
译者:前端小智
来源:learnvue
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
插件是为Vue应用添加可重用功能的好方法。有了大量用于组件、路由等的现有插件,Vue的生态系统为许多常见的用例提供了解决方案。
一些常用插件有vue-router
、vue custom-element
和 vue-touch
。
然而,总会有时候,没有一个插件能满足我们的需求时,我们就需要自己写个插件满足产品的口味。
在本教程中,我们来学习构建自己的Vue 3插件。
我们可以用 Vue 插件做什么?
简单地说,Vue插件允许我们将任何类型的功能提取到其自身包含的代码中,这些代码可以在不同的项目中重用。
通常,它们被用于向Vue应用程序添加全局级别的功能。根据Vue文档,以下是一些插件最常见的用法。
- 添加全局组件
- 添加全局指令,过渡或其资源
- 使用全局mixins添加组件选项(比如
vue-router
) - 将加法属性添加到Vue实例上(通过
app.config.globalproperties
)
接下来我们会一个一个的讲,首先先来创建我们第一个插件。
创建我们的Vue 3插件
在本教程中,我们将制作一个插件,该插件添加了允许我们将UI元素和样式添加到我们的应用程序中。
我们创建一个名为MyPlugin.js
的文件,并在其中创建一个带有install
方法的export default
。这个方法有两个参数:
app
- 由 Vue 的createApp
生成的app
对象options
- 用户传入的选项
// MyFirstPlugin.js
export default
install: (app, options) =>
// TODO
然后,为了将这个插件插入到Vue应用中,进入main.js
文件并使用app.use()
。
// main.js
import createApp from 'vue'
import App from './App.vue'
import MyFirstPlugin from './plugin'
const app = createApp(App)
app.use(MyFirstPlugin, /* 可以传递 options 作为第二个参数*/)
app.mount('#app')
这要,我们就做好的初步的工作。
从Vue插件添加全局组件
Vue插件的一个重要用途是添加可以在 Vue项目中的任何地方使用的全局组件,而不必每次都要导入。
使用app
参数,我们可以使用app.component
语法声明全局组件。
通过使用app.component
,我们可以使用单文件组件或直接在 js 文件中声明我们的组件。
假设我们想创建一个标题组件(MyHeader.vue
)–它包含了一篇文章的信息。
<template>
<div>
<h1 class="header-title">
<slot name="title" />
</h1>
<h2 class="title-author">
<slot name="author" />
</h2>
</div>
</template>
回到 MyFirstPlugin.js
,将它添加到我们的插件中。
// MyFirstPlugin.js
import MyHeader from './components/MyHeader.vue'
export default
install: (app, options) =>
/* 声明全局组件 */
app.component('my-header', MyHeader)
现在,我们可以在任何地方使用MyHeader
,因为它是全局注册的。
例如, 在 App.vue
中使用。不需要导入,只需将其添加到模板中。
<template>
<my-header>
<template #title>
Building Your Own Vue 3 Plugin - <i> A Full Guide </i>
</template>
<template #author>
Matt Maribojoc
</template>
</my-header>
</template>
运行结果:
我们还可以在这些组件中添加样式
如果我们向组件添加任何非作用域样式,直接在组件内设置即可。
例如,如果我们想改变整个项目的字体大小和背景颜色,我们可以在MyHeader
组件中实现。
<template>
<div>
<h1 class="header-title">
<slot name="title" />
</h1>
<h2 class="title-author">
<slot name="author" />
</h2>
</div>
</template>
<style>
html, body, *
font-size: 1.2em;
background: #fafafa;
</style>
运行后:
使用Vue插件添加全局指令
我使用Vue中最喜欢的一点是能够创建自己的指令。
指令是Vue允许开发人员直接编辑DOM的一种方式。例如v-if
、v-show
、v-bind
等等。
而通过插件,我们可以很容易地使用app.directive
创建指令,并在多个项目中使用。
简而言之,我们希望接受一个指令参数,确定元素的字体大小,然后更改该元素的样式(通过el
)来使用适当的大小。
// MyFirstPlugin.js
export default
install: (app, options) =>
app.component('my-header', MyHeader)
app.directive("font-size", (el, binding, vnode) =>
var size = 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
或任何组件内部,因为它是全局可用的,我们可以像这样使用指令。
<template>
<p v-font-size:small>Small</p>
<p v-font-size:medium>Medium</p>
<p v-font-size:large>Large</p>
<my-header>
<template #title>
Building Your Own Vue 3 Plugin - <i> A Full Guide </i>
</template>
<template #author>
Matt Maribojoc
</template>
</my-header>
</template>
运行后:
使用插件选项提供定制
给插件添加选项是一个很好的方法,可以使插件在不同的使用情况下更加灵活。
假设我们希望开发人员能够控制small
、medium
、large
参数的确切大小。
回到main.js
,我们可以向app.use
函数添加第二个参数:
// main.js
app.use(MyFirstPlugin,
fontSize:
small: 12,
medium: 24,
large: 36
)
然后,回到我们的插件中,我们可以使用options
对象来提取传递给插件的任何内容,而不是硬编码我们的字体大小。
// MyFirstPlugin.js
app.directive("font-size", (el, binding, vnode) =>
var size = 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应用程序添加可重用功能的一种常见方式是使用Vue mixins。Mixins 是一种向Vue组件添加组件选项的方法。
我们可以添加任何组件选项,如生命周期钩子、数据和方法,如果一个组件使用了这个mixin,这些选项将与该组件的选项合并。
理解如何合并这些选项是很重要的。例如,mixin 生命周期钩子将在组件钩子之前被调用,并且如果有命名冲突,组件数据将优先于mixin数据。
我们可以使用app.mixin
方法创建一个全局的mixin
。
比方说,我们想添加一个创建的钩子,它只是向我们的控制台打印一个日志语句,并想给一个数据属性,它给出了一个外部URL,我们可以用它来改变整个应用程序中链接的href属性。
// MyFirstPlugin.js
export default
install: (app, options) =>
app.mixin(
data()
return
featuredLink: 'https://learnvue.co'
,
created()
console.log("Printing from created.")
,
)
在我们使用的任何组件中,created
钩子将运行,我们可以访问我featuredLink
属性。 两个打印 - 一个用于app.vue
和一个用于myheader.vue
在插件中使用 Provide 和 Inject
让特定组件访问不同属性和方法的一种强大方法是使用Vue中的 provide
和inject
模式。
这允许我们的插件 "provide"
一个属性或方法,并允许任何组件 "inject"
这个值。
来看看一个例子,我们创建一个logout
方法。我们不需要这个方法对每一个组件都可用,但我们想只创建一个logout
方法,这样将来修改起来就更容易。
在我们的插件内部,我们声明我们的方法并调用app.provide
来将它提供给我们的应用的其他部分。
// MyFirstPlugin.js
import provide from 'vue'
export default
install: (app, options) =>
const logout = () =>
console.log('Logout is being called')
app.provide('logout', logout)
然后,在任何组件中,我们都可以注入这个方法,并创建一个调用logout
方法的按钮。
<template>
<button @click="logout"> Logout </button>
<p v-font-size:small>Small</p>
<p v-font-size:medium>Medium</p>
<p v-font-size:large>Large</p>
<a :href="featuredLink"> Featured Link </a>
<my-header>
<template #title>
Building Your Own Vue 3 Plugin - <i> A Full Guide </i>
</template>
<template #author>
Matt Maribojoc
</template>
</my-header>
</template>
<script setup>
import inject from 'vue'
const logout = inject('logout')
</script>
运行后会看到,每当我们点击按钮,logout
里面内容就会被打印出来。
总结
设计你自己的Vue 3插件的可能性是无限的。希望本文能对你有所帮助。
~完,我是小智,整理这篇文章时,正在生病中,准备去会所嫩模放松一下。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://learue.co/2021/06/building-your-own-vue-3-plugin-a-full-guide/
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
一步一步带你分析requirejs
详细源代码一共就2000多行,来看我这篇分析的同学应该都下载下来了,好了,话不多说,开始: 代码的开头就出现3个全局变量: requirejs,require,definevarrequirejs,require,define;(function(global,setTimeout){balababla......})(this,(typeofsetTime... 查看详情
vue一步一步带你封装一个按钮组件(代码片段)
...我们直接看一下代码显示首先是今天有一个学妹过来问我如何封装子组件#实现效果首先这个组件是基于eleemnt-ui进行封装的我们看一眼实现效果 有了实现效果之后我们一起来看看他的父子组件有了实现效果之后我们一起来看... 查看详情
(第一篇)一步一步带你了解linqtoobject(代码片段)
...函数,我们必须学会委托,这是本文的宗旨。下面开始第一步。在第一步开始之前,我们做点准备工作,建立一个学生类和一个班级类,类结构如下publicclassStudentpublicintIdget;set;publicintCla 查看详情
面试必备透过源码角度一步一步带你分析arraylist扩容机制(代码片段)
一先从ArrayList的构造函数说起ArrayList有三种方式来初始化,构造方法源码如下:/**默认初始容量大小*/privatestaticfinalintDEFAULT_CAPACITY=10;privatestaticfinalObject[]DEFAULTCAPACITY_EMPTY_ELEMENTDATA=;/*默认构造函数,使用初始容量10构造一个空列表... 查看详情
android一步一步带你实现recyclerview的拖拽和侧滑删除功能
先上效果图: 本篇文章我们来学习一个开源项目Android-ItemTouchHelper-Demo 这个项目使用了RecyclerView的ItemTouchHelper类实现了Item的拖动和删除功能,ItemTouchHelper是v7包下的一个类,我们看一下他的介绍Thisisautilityclasstoaddswip... 查看详情
一步一步带你反编译apk,并教你修改smali和重新打包
一、工具介绍:1.apktool:aapt.exe,apktool.bat,apktool.jar;三个在同一目录结合使用,用来反编译apk,apk重新打包;2.dex2jar:该工具作用是将classes.dex文件,反编译出源码(如果apk未加固),反编译出文件,使用jd-gui工具进行查看;3.Auto-Sign... 查看详情
一步一步,如何在 Visual Studio 2010 中为给定类型的每个文件添加自定义构建步骤?
】一步一步,如何在VisualStudio2010中为给定类型的每个文件添加自定义构建步骤?【英文标题】:Stepbystep,howdoIaddacustombuildstepforeveryfileofagiventypeinVisualStudio2010?【发布时间】:2012-10-2207:23:59【问题描述】:问题我在一个VisualStudio2010... 查看详情
一步一步教你如何制件zkeacms的扩展组件/插件
前言如果你还不知道ZKEACMS,不妨先了解一下。ASP.NETMVC开源建站系统ZKEACMS推荐,从此网站“拼”起来官方地址:http://www.zkea.net/zkeacms下载地址:https://github.com/SeriaWei/ASP.NET-MVC-CMS/releasesGitHub:https://github.com/SeriaWei/ASP. 查看详情
Symfony2文件上传一步一步
...经检查过thedocumentation。真的很好,但是我的问题在任何教程中都没有解释。我正在寻找有关如何使用Symfony2上传文件的指导,但包含每个人都需要的所有东西(例如扩展限制、基于id和内容重命名文件、 查看详情
一步一步部署ssis包图解教程
本文就SQL统计分析SSIS包的部署进行一次详细的部署图解教程,SqlServerIntegrationServices提供了非常简单的部署工具,利用这些工具可以方便地将包文件(*.dtsx)、包配置文件(*.dtsconfig)以及包的其它相关文件,打包成一个安装文件,... 查看详情
一步一步学vue
...不同,我们会对其进行增删改查的基本操作,之后进行进一步的完善,按照常规的系统使用经验,一般我们新增和编辑都是在模态框中处理,这里我们不会去构建复杂的模态框,只用一个简单的div层来代替,后期接下来的文章中... 查看详情
如何在openGL中制作一步一步的显示动画?
】如何在openGL中制作一步一步的显示动画?【英文标题】:HowtomakeastepbystepdisplayanimationinopenGL?【发布时间】:2012-10-2121:13:59【问题描述】:?我正在做一个reprap打印机项目来读取GCode文件并将其解释为图形。现在我很难一步一步... 查看详情
一步一步--如何将tableview添加到nib
】一步一步--如何将tableview添加到nib【英文标题】:Stepbystep--howtoaddtableviewtonib【发布时间】:2015-09-0912:32:17【问题描述】:我第一次使用nib文件并尝试添加一个带有tableview单元格的tableview。我创建了一个UIView控制器类型的nib文件... 查看详情
一步一步学rendermonkey
http://blog.csdn.net/tianhai110/article/details/5668832 转载请注明出处:http://blog.csdn.net/tianhai110/ 网上一些关于renderMonkey的教程:《RenderMonkey的基本使用方法》http://www.cnblogs.com/mixiyou/archive/2009/10/05/ 查看详情
求android软件开发项目的教程,一步一步教的
参考技术Ahttp://wenku.baidu.com/course/view/b46ea98271fe910ef12df803这个是百度文库的轻松几步学Android开发。本课程包括Android平台下开发的基础知识,项目编程的实用技巧,还有多个真实案例讲解。通过学习,学员可快速开发一个可正常运... 查看详情
visualc++2010在写好的c程序后,如何一步一步查看程序的运行??
...??我是想看程序的运行过程。。我用的vs2012,不过原理都是一样的,打开你的程序,在上方菜单里,有调试选项,下拉选择里有逐语句调试(快捷键f11),点击逐语句调试,就开始了调试,你应该能看到程序开头有个箭头指向... 查看详情
如何一步一步精通vim
vimhttps://github.com/ma6174/vim/tree/master/bundle/syntastichttps://github.com/ma6174/vim/blob/master/tips.md#快速注释本文出自“运维自动化”博客,请务必保留此出处http://shower.blog.51cto.com/4926872/1865252 查看详情
一步一步解读refresh源码(代码片段)
解读refreshrefresh()1.prepareRefresh2.obtainFreshBeanFactoryBeanDefinition测试(读取Bean方式)1.xml方式读取2.组件扫描4.编程方式(Bean构建器)3.prepareBeanFactory4.postProcessBeanFactory5.invokeBeanFa 查看详情