VUE3 教程(理工直男都是如何一步一步带妹构建插件())
作者:Shadeed
译者:前端小智
来源:learnvue
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。插件是为Vue应用添加可重用功能的好方法。有了大量用于组件、路由等的现有插件,Vue的生态系统为许多常见的用例提供了解决方案。
【VUE3 教程(理工直男都是如何一步一步带妹构建插件())】本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
一些常用插件有
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.jsexport default {
install: (app, options) => {
// TODO
}
}
然后,为了将这个插件插入到Vue应用中,进入
main.js
文件并使用app.use()
。// main.jsimport { 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
)--它包含了一篇文章的信息。
回到
MyFirstPlugin.js
,将它添加到我们的插件中。// MyFirstPlugin.jsimport MyHeader from './components/MyHeader.vue'
export default {
install: (app, options) => {
/* 声明全局组件 */
app.component('my-header', MyHeader)
}
}
现在,我们可以在任何地方使用
MyHeader
,因为它是全局注册的。例如, 在
App.vue
中使用。不需要导入,只需将其添加到模板中。
Building Your Own Vue 3 Plugin - A Full Guide
Matt Maribojoc
运行结果:
文章图片
我们还可以在这些组件中添加样式
如果我们向组件添加任何非作用域样式,直接在组件内设置即可。
例如,如果我们想改变整个项目的字体大小和背景颜色,我们可以在
MyHeader
组件中实现。html, body, * {
font-size: 1.2em;
background: #fafafa;
}
运行后:
文章图片
使用Vue插件添加全局指令
我使用Vue中最喜欢的一点是能够创建自己的指令。
指令是Vue允许开发人员直接编辑DOM的一种方式。例如
v-if
、v-show
、v-bind
等等。而通过插件,我们可以很容易地使用
app.directive
创建指令,并在多个项目中使用。简而言之,我们希望接受一个指令参数,确定元素的字体大小,然后更改该元素的样式(通过
el
)来使用适当的大小。// MyFirstPlugin.jsexport 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
或任何组件内部,因为它是全局可用的,我们可以像这样使用指令。Small
Medium
Large
Building Your Own Vue 3 Plugin - A Full Guide
Matt Maribojoc
运行后:
文章图片
使用插件选项提供定制
给插件添加选项是一个很好的方法,可以使插件在不同的使用情况下更加灵活。
假设我们希望开发人员能够控制
small
、medium
、large
参数的确切大小。回到
main.js
,我们可以向app.use
函数添加第二个参数:// main.jsapp.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.jsimport { provide } from 'vue'export default {
install: (app, options) => {
const logout = () => {
console.log('Logout is being called')
}app.provide('logout', logout)
}
}
然后,在任何组件中,我们都可以注入这个方法,并创建一个调用
logout
方法的按钮。
Small
Medium
Large
Featured Link
Building Your Own Vue 3 Plugin - A Full Guide
Matt Maribojoc
运行后会看到,每当我们点击按钮,
logout
里面内容就会被打印出来。总结
设计你自己的Vue 3插件的可能性是无限的。希望本文能对你有所帮助。
~完,我是小智,整理这篇文章时,正在生病中,准备去会所嫩模放松一下。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://learue.co/2021/06/bui...
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
文章图片
推荐阅读
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)
- 最有效的时间管理工具(赢效率手册和总结笔记)
- 心理工作要不断的评估现实事件对来访者心理造成的影响是什么
- 用npm发布一个包的教程并编写一个vue的插件发布
- 20180322【w4复盘日志】
- 狗狗定点大小便视频教程下载地址
- 积极探索|积极探索 绽放生命 ???——心心相印计划:青少年心理工作研讨小组全国大型公益行动第二次活动包头市青山区分校圆满成功
- SwiftUI|SwiftUI iOS 瀑布流组件之仿CollectionView不规则图文混合(教程含源码)
- 【实用教程】4种获取无水印视频素材的方法