本文共 1221 字，大约阅读时间需要 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/