vue~全局插件和全局方法的注册
本文介绍如何在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引入它了。
合集:
前端技术
分类:
前端技术 / vue&react
, 前端技术
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2021-10-08 keycloak~记住密码实现关闭浏览器用户状态保持原理
2018-10-08 springboot~mybatis里localdatetime序列化问题
2016-10-08 异步与并行~ReaderWriterLockSlim实现的共享锁和互斥锁
2014-10-08 缓存篇(Cache)~第二回 使用static静态成员实现服务器端缓存(导航面包屑)~续
2014-10-08 缓存篇(Cache)~第一回 使用static静态成员实现服务器端缓存(导航面包屑)
2012-10-08 分层中的~条件过滤~每个层对于“条件过滤”的职责