本文介绍如何在vue中定义插件，注册插件和使用插件
插件目录
/src/plugins
插件入口文件
/src/plugins/index.js
import cache from './cache'
import modal from './modal'
// 安装默认插件,在main.js中引入，通过Vue.use()使用它,因为index.js里使用export default导出，所有在main.js里导入时可以不用加{}，直接import plugins from "~/plugins";
export default {
install(Vue) {
// 缓存对象
Vue.prototype.$cache = cache
// 模态框对象，在vue页面中使用this.$modal.xxx()调用
Vue.prototype.$modal = modal
}
}注册全局插件
/src/main.js
import plugins from "~/plugins";
Vue.use(plugins)vue文件中使用插件
注意在其它js中还是需要手动引用插件的，这个main.js中的注册，只有vue文件有效.
<el-button @click="alertTest">全局插件</el-button>
<script>
export default {
methods: {
alertTest() {
this.$modal.confirm("不用在vue显示引用plugins/modal.js，它通过在plugins/index.js中引用，在main.js中注册，已经是全局的了");
}
}
}
</script>注册全局方法
- 还是在上面的/src/main.js中进行添加prototype的定义
- 从插件中引入一个方法addDateRange
import { addDateRange } from "@/utils/ruoyi"; - 在prototype中添加原型扩展方法
Vue.prototype.addDateRange = addDateRange - 下面我们可以在view中直接使用这个addDateRange方法了，而不需要再import引入它了。
作者：仓储大叔，张占岭，
荣誉：微软MVP