本文共 1247 字，大约阅读时间需要 4 分钟。

开发环境配置与Vue全局插件自定义实现

Vue全局插件的创建与使用

一、开发环境配置

使用Win 10系统安装node.js环境

下载地址：node-v10.15.3-x64.msi

二、插件实现方式

export function sendRequest() { console.log("send request by sendRequest Plugin"); }

3. 在plugin目录下创建customPlugin.js文件

import sendRequest from "./sendRequest"; export default sendRequest;

4. 在plugin目录下创建index.js文件

import customPlugin from "./customPlugin"; const install = Vue => { if (install.installed) return; install.installed = true; Object.defineProperty(Vue.prototype, "$customPlugin", { get() { return customPlugin; } }); }; export default install;

注意：Object.defineProperty方法用于在Vue原型上挂载插件对象

五、在主文件中使用插件

在main.js文件中添加以下内容：

import Vue from "vue"; import App from "./App"; import router from "./router"; import customPlugin from "@/plugin/index";

Vue.use(customPlugin); Vue.config.productionTip = false;

new Vue({ el: "#app", router, components: { App }, template: "

" });

六、在.vue组件中引用插件方法

在methods中定义方法：

methods: { sendRequest() { this.$customPlugin.sendRequest(); } }

关于插件调用方法

可在js文件中直接引入customPlugin，使用Vue.prototype.$customPlugin.sendRequest()的方式调用

需要注意的是，直接使用pluginName.fileModuleName.functionName()可能会导致fileModuleName为undefined的问题，建议使用Vue.prototype.$pluginName.fileModuleName.functionName()的方式调用

转载地址：http://smvfz.baihongyu.com/