插件用于增强 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