本文介绍如何在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引入它了。
千百度
© 版权声明
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
THE END
暂无评论内容