我们之前在项目中创建了一个 helper 文件夹,专门用来存放辅助工具或者方法。
我们把插件写到这个文件夹里
|-- src
|-- helpers
|-- request.js
|-- util.js // 通用方法
下面开始写我们的 util.js
的代码
... // 省略插件代码的细节,这里是方法
function plugin() {
...
}
// 将这个插件对象抛出
export default {
install(Vue, options) {
Vue.prototype.plugin = plugin
}
}
如何理解上面抛出插件对象的方法呢?
这可以理解为 Vue 中的插件对象,对象里面有个 install
属性,默认传递的参数是 Vue
和 options
(一些配置信息)
然后如何在项目中使用它呢?只需要在 main.js 中加入下面的代码即可
import Plugin from '@/helpers/util'
Vue.use(Plugin)
Vue.use(Plugin)
这一行代码其实就是执行插件对象中的 install
方法,将我们写好的插件方法 plugin
加入到 Vue.prototype
中,使 Vue 的实例对象都拥有 plugin
这个插件方法。
如果项目中还有辅助处理的方法都可以放入到 util.js
中,通过 install
方法将它加入到 Vue.prototype
原型中。
最后我们就可以在项目中想用到此插件方法的地方使用它了。