51工具盒子
随着 VueJS 的日益普及，社区创建的 VueJS 插件变得越来越普遍和强大。
事实上，我发现有一些插件疯狂有用。例如，有惊人的UI 库和实用插件，为我节省了大量的开发时间。
虽然创建自己的插件似乎是一项艰巨的任务，但它实际上比您想象的要可行得多。在本教程结束时，您将拥有...
-
创建了你的第一个 VueJS 插件
-
概述它们的工作原理
-
学习了构建更复杂插件的所有工具
是时候潜入了！！
如何设置您的插件 {#how-to-setup-your-plugin}
从广义上讲，我们的插件只是一个公开_.install_method的 JavaScript 模块。此方法需要 2 个参数
-
Vue 构造函数
-
选项的对象
让我们开始吧。
在我们的 Vue 项目中，创建一个新文件夹src/plugins
然后在我们的新文件夹中，我们实际上可以创建我们的插件文件。在本教程中，我将其命名为first-plugin.js
虽然创建自己的插件似乎是一项艰巨的任务，但它实际上比您想象的要可行得多。
在我们的新插件文件中，我们应该遵循一个典型的ES6 模块模式又名整个"导出默认值"的东西。Export Default 允许我们从其文件中导出插件并允许其他文件导入它。
接下来，就像我们之前讨论的那样，我们的插件必须公开一个 .install（Vue， options） 方法。这就是我们安装插件时 Vue 的实际调用。
所以现在，骨架代码应该有点像这样。
export default {
// called by Vue.use(FirstPlugin)
install(Vue, options) {},
};
现在，让我们实际向这段代码添加一些东西。
向插件添加功能 {#adding-functionality-to-a-plugin}
既然我们已经设置了插件的大纲，我们就可以开始构建它了。我们可以使用几种不同的选项来添加功能。现在，我们只介绍一个快速简便的方法（别担心，我们稍后会介绍更高级的技术）。
构建您的第一个插件 {#building-your-first-plugin}
查看插件运行情况的一种简单方法是创建一个全局 mixin，它将包含在所有 Vue 实例中。这可以使用Vue.mixin功能。
如果您不熟悉，以下是VueJS mixin 从本质上讲，它们允许您注入其他组件选项。它们是提取和重用组件之间通用功能的好方法。Mixins 还允许你的插件访问 Vue 生命周期钩子。
为了将 mixin 添加到插件中，我们在 Vue.mixin 函数中声明了我们的附加组件选项。首先，我刚刚添加了一个带有 console.log 语句的创建生命周期钩子。
我们的插件代码现在应该看起来像这样。
export default {
// called by Vue.use(FirstPlugin)
install(Vue, options) {
// create a mixin
Vue.mixin({
created() {
console.log(Vue);
},
});
},
};
安装插件 {#installing-your-plugin}
如果你现在要运行你的项目，你会注意到什么都没有改变。那是因为我们还没有安装我们的插件。
值得庆幸的是，这是一个超级简单的两行过程。在我们的 src/main.js 文件中------声明我们的 Vue 构造函数的文件------我们只需要导入并安装我们的插件文件。
这是通过这些代码行完成的。
import FirstPlugin from "./plugins/first-plugin.js";
Vue.use(FirstPlugin);
Vue.use 的一大优点是它确保你的插件只安装一次。如果您以某种方式不小心添加了两次，它会减慢您的应用程序速度，并可能搞砸某些功能。值得庆幸的是，Vue 开发人员提供了这个安全网。
最后。我们已经安装了我们的插件。现在，如果我们运行我们的项目并查看日志，我们应该在控制台中看到一些输出。
让我们让它真正有用 {#lets-make-it-actually-useful}
好的，太好了！您已经正式创建了您的第一个插件。但它并没有真正做任何太有用的事情。
让我们来看看一些使您的插件正常运行的巧妙方法。
声明全局属性 {#declaring-global-properties}
全局数据/方法是向代码添加广泛功能的有用方法。这也非常容易做到。假设我们希望应用程序的当前版本是全局属性。会是这样的......
export default {
install(Vue, options) {
// define a global property
Vue.VERSION = 'v2.0.3'
},
}
需要注意的一件事是过度使用全局变量。它非常容易使全球范围过度拥挤，并使使用起来很痛苦。
定义实例属性 {#defining-instance-properties}
这是我最喜欢的添加到插件的方式之一。实例属性是将数据和方法添加到 Vue 项目的便捷方法。我更喜欢使用实例属性，以保持我的全局范围干净且易于理解。
在此示例中，我刚刚创建了一个实例方法，该方法采用字符串并放置在标记中。
注意：$ 不是必需的语法;这只是 Vue 用于实例属性以避免冲突的命名约定。
// define an instance method
Vue.prototype.$italicHTML = function (text) {
return '<i>' + text + '</i>'
}
然后，我们可以在任何这样的组件中使用它......
<div v-html="$italicHTML(content)"></div>
构建全局筛选器 {#building-a-global-filter}
VueJS 过滤器是我最喜欢的技术之一，因为它们使文本转换变得如此简单。再一次，我们所要做的就是调用 Vue 构造函数方法 Vue.filter 和 boom------我们在整个 Vue 项目中有一个可重用的全局过滤器。
以我之前关于过滤器的教程中的一个例子为例，假设我们想使用过滤器从较长的文本生成预览片段。我们想在我们的插件中做这样的事情。
// define a global filter
Vue.filter('preview', (value) => {
if (!value) {
return ''
}
return value.substring(0, userOptions.cutoff) + '...'
})
添加自定义指令 {#adding-custom-directives}
自定义指令是对特定元素进行低级 DOM 访问的好方法。
从VueJS 文档，让我们在插件中创建一个自定义指令，该指令会自动将元素聚焦在页面上。
在 install 方法中，我们只需要使用 Vue.directive 方法来声明我们的新指令。
// add a custom directive
Vue.directive('focus', {
// When the bound element is inserted into the DOM...
inserted: function (el) {
// Focus the element
el.focus()
},
})
然后，我们可以将其添加到一个元素中。这就是我们在页面加载时自动将文本输入聚焦的方式。
<input type="text" placeholder="Type..." v-focus />
合并 Options 对象 {#incorporating-the-options-object}
到目前为止，我们还没有触及安装方法的第二个参数。这种方法可以让你的插件在不同的场景中更加灵活。
为了使用 options 对象，我们首先必须向我们的插件传递一些选项。
一最佳实践使用 Options 对象时，需要创建一些默认值。我们可以通过私下将默认选项对象定义到插件文件，然后使用 Javascript 的传播语法将默认选项与参数选项合并。
回顾前面的示例，假设我们想添加一个选项，允许我们设置文本预览的截止点。那会是这样的......
const defaultOptions = {
cutoff: 50,
}
export default {
// called by Vue.use(FirstPlugin)
install(Vue, options) {
// merge default options with arg options
let userOptions = { ...defaultOptions, ...options }
// REST OF PLUGIN CODE
},
}
现在，即使没有传递给插件的选项，它仍将使用默认值运行。
使用 options 对象时，最佳做法之一是创建一些默认值。
如果我们确实想传递选项，这很简单。在我们的文件中，我们所要做的就是为我们的 Vue.use 方法添加第二个参数。此参数将是一个 options 对象。src/main.js
Vue.use(FirstPlugin, { cutoff: 100 })
因为我们把参数选项放在扩展语法的右侧，所以它覆盖了我们的默认值。
我们最终的大杂烩插件 {#our-final-hodge-podge-plugin}
实施这些技术后。这是我们最终的插件代码。
const defaultOptions = {
cutoff: 50,
}
export default {
// called by Vue.use(FirstPlugin)
install(Vue, options) {
// merge default options with arg options
let userOptions = { ...defaultOptions, ...options }
// create a mixin
Vue.mixin({
created() {
console.log(Vue)
},
})
// define a global property
Vue.VERSION = 'v2.0.3'
// define an instance method
Vue.prototype.$italicHTML = function (text) {
return '<i>' + text + '</i>'
}
// define a global filter
Vue.filter('preview', (value) => {
if (!value) {
return ''
}
return value.substring(0, userOptions.cutoff) + '...'
})
// add a custom directive
Vue.directive('focus', {
// When the bound element is inserted into the DOM...
inserted: function (el) {
// Focus the element
el.focus()
},
})
},
}
是的。这个插件在功能方面绝对是无处不在的。但是，如果您按照操作，您现在已经熟悉了构建更高级插件所需的大多数工具、方法和技术。
结论 {#conclusion}
看？还不错！你制作了你的第一个插件。我希望本教程能很好地介绍创建 VueJS 插件的可能性。
