在使用vue构建一些大型项目的时候，会发现许多组件会共用到一些函数或常量，我们需要把它提取出来，每次需要的时候调用一次就可以了，避免每个组件都重新写再一篇的麻烦。这就需要写一个插件，在Vue.prototype上挂载我们需要的全局方法属性，比如Vue.prototype.const={}就是项目中的常量，Vue.prototype.utils={}就是项目的方法。下面就详细介绍下基于vue-cli的架子如何开发。

1、新建插件文件Plugins.js：

export default{
    install(Vue){
    	Vue.prototype.$const={//常量
            URL:"http://www.fly63.com/",//项目请求接口的url
        }
        Vue.prototype.$utils={//全局方法
            getUrlParam:function(name) {//获取url中的参数
		var reg = new RegExp('(^|&?)' + name + '=([^&]*)(&|$)', 'i');
		var r = window.location.href.substr(1).match(reg);
		if (r != null) {
			return decodeURI(r[2]);
		 }
		return undefined;
	    },
       }
    }
}

2、main.js入口函数，配置如下：

import Plugins from './assets/js/Plugins.js'// 引入

Vue.use(Plugins) //通过全局方法 Vue.use() 使用插件

3、在组件中的使用：

created:function(){
	console.log(this.$const.URL)；//调用常量
        var name=this.$utils.getUrlParam('name');//调用方法
},

就怎么简单的完成我们的需求，插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：

1. 添加全局方法或者属性，如: vue-custom-element

2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch

3. 通过全局 mixin 方法添加一些组件选项，如: vue-router

4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

5. 一个库，提供自己的 api，同时提供上面提到的一个或多个功能，如 vue-router

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/498