Vue自定义插件

简介: Vue自定义插件

插件用于增强 Vue 的能力。使用方法:Vue.use() 。

install 方法的第一个参数是 Vue ,第二个以后的参数才是自定义参数。

自定义插件使用流程:

首先在 src 目录下新建一个 plugins.js 文件,这个文件名可以自定义

在 plugins.js 文件中导出一个对象,然后创建 install 方法 并接收一个参数。

export default {
    install(Vue){
        console.log("插件执行啦");
        console.log(Vue);
    }
}

最后在 main.js 引入插件,并通过 Vue.use 方法使用。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入插件
import plugins from './plugins'
Vue.config.productionTip = false
// 使用插件
Vue.use(plugins)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

打开 Home.vue 页面,测试是否引入成功。

<template>
    <div>
        <h1>Home页面</h1>
    </div>
</template>
<script>
export default {
    name: 'Home'
}
</script>

:当引入这个插件后,Vue 会自动执行 install 中的内容。install 方法还有一个默认参数,这个参数就是 Vue 实例的构造函数。

 

:我们可以通过 Vue 的构造函数定义各种各样的方法,供我们开发使用。

原创作者:吴小糖

创作时间:2023.5.24

相关文章
|
6天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
3天前
|
JavaScript
理解 Vue 的 setup 应用程序钩子
【10月更文挑战第3天】`setup` 函数是 Vue 3 中的新组件选项,在组件创建前调用,作为初始化逻辑的入口。它接收 `props` 和 `context` 两个参数,内部定义的变量和函数需通过 `return` 暴露给模板。`props` 包含父组件传入的属性,`context` 包含组件上下文信息。`setup` 可替代 `beforeCreate` 和 `created` 钩子,并提供类似 `data`、`computed` 和 `methods` 的功能,支持逻辑复用和 TypeScript 类型定义。
20 11
|
5天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
15 4
|
5天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
16 4
|
6天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
5天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
15 2
|
8天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
7天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
7天前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
6天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
下一篇
无影云桌面