本文共 1221 字,大约阅读时间需要 4 分钟。
开发环境配置与Vue全局插件自定义实现
Vue全局插件的创建与使用
一、开发环境配置
使用Win 10系统安装node.js环境
下载地址:node-v10.15.3-x64.msi
二、插件实现方式
创建src目录下的plugin子目录
在plugin目录下创建sendRequest.js文件
export function sendRequest() {console.log("send request by sendRequest Plugin");}
import sendRequest from "./sendRequest";export default sendRequest;
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/