https://www.cnblogs.com/shenjianping/p/11315839.html
1、插件的作用
- 插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等
- Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能
- 通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成.
2、开发插件并且使用
在项目目录下创建plugins.js文件，用于写入插件内容
(function () {
const MyPlugin = {} //声明一个插件对象
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
alert("添加全局方法或属性")
}
// 2. 添加全局资源
Vue.directive('my-directive', {
inserted: function (el, binding) {
el.innerHTML = binding.value
}
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
})
// 4. 添加实例方法，可以传参
Vue.prototype.$myMethod = function () {
alert('添加实例方法')
}
}
// 将插件添加到 window 对象中
window.MyPlugin = MyPlugin
})()
在index.html中进行引入，并且使用：
- 引入文件
<script src="./plugins.js"></script>
- 通过全局方法
Vue.use()使用插件
Vue.use(MyPlugin)
- 使用
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-my-directive="msg"></button> <!--使用指令-->
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./plugins.js"></script>
<script>
Vue.use(MyPlugin)
var vm = new Vue(
{
el: '#app',
data: {
msg: 'hello'
},
// 在 `methods` 对象中定义方法
methods: {
}
}
)
//调用自定义的全局方法,Vue 调用
Vue.myGlobalMethod()
// 调用 Vue 实例方法，vm实例调用
vm.$myMethod()
</script>
</body>
</html>