vue~全局插件和全局方法的注册

  • vue~全局插件和全局方法的注册已关闭评论
  • 116 次浏览
  • A+
所属分类:Web前端
摘要

本文介绍如何在vue中定义插件,注册插件和使用插件/src/plugins/src/plugins/index.js

本文介绍如何在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引入它了。