1. 创建common.js（编写插件），插件内利用Vue.prototype全局挂载方法

   import { Toast } from 'vant';
   import echarts from 'echarts';
   
   const install = (Vue) => {
     // toast提示,通过this.Toast调用
     Vue.prototype.Toast = Toast;
     // echarts,通过this.$echarts调用
     Vue.prototype.$echarts = echarts;
     // 获取url参数
     Vue.prototype.$getUrlParam = (name, href) => {
       const _search = href ? href.split('?')[1] : window.location.search.substr(1);
       if (_search) {
         const _reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
         const _regNext = _search.match(_reg);
         if (_regNext) {
           return decodeURI(_regNext[2]) || '';
         }
         return '';
       }
       return '';
     };
   
   

2. main.js（通过Vue.use注册刚刚编写的自定义插件），关于Vue.use的介绍，可以参考Vue.use的使用和基本原理

   import Vue from 'vue';
   import App from './App';
   import router from './router';
   import store from './store';
   
   // 引入自定义插件
   import common from './lib/common';
   Vue.use(common); // 全局配置项
   
   /* eslint-disable no-new */
   // 把vue实例挂载在window.vm,方便使用vue的实例
   window.vm = new Vue({
     el: '#app',
     router,
     store,
     components: {
       App,
     },
     template: '<App/>',
   });
   
   

3. 在任意组件中使用刚刚通过Vue.prototype全局注册的方法，比如使用$getUrlParam方法，直接通过this.$getUrlParam即可调用

   <template>
     <div class="page">
   	Vue.prototype全局注册的方法测试
     </div>
   </template>
   
   <script>
   export default {
     name: 'Test',
     data() {},
   
     created() {
       console.log(this.$getUrlParam('idCard'))
     },
   };
   </script>
   

4. 在任意js文件中使用刚刚通过Vue.prototype全局注册的方法，比如使用$getUrlParam方法。因为我们已经在main.js中将vue实例挂载在window.vm,所以在js文件中，直接通过window.vm.$getUrlParam即可调用

   console.log(window.vm.$getUrlParam('idCard'))
   

当然，如果不想通过编写组件然后Vue.use的方式引入全局方法，也可以直接在main.js通过Vue.prototype注册全局方法/变量/组件。

mian.js:

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
	
// 通过Vue.prototype注册全局方法/变量/组件
// toast提示,通过this.Toast调用
Vue.prototype.Toast = Toast;
// echarts,通过this.$echarts调用
Vue.prototype.$echarts = echarts;
// 获取url参数
Vue.prototype.$getUrlParam = (name, href) => {
  const _search = href ? href.split('?')[1] : window.location.search.substr(1);
  if (_search) {
    const _reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
    const _regNext = _search.match(_reg);
    if (_regNext) {
      return decodeURI(_regNext[2]) || '';
    }
    return '';
  }
  return '';
};
	
// 把vue实例挂载在window.vm,方便使用vue的实例
window.vm = new Vue({
  el: '#app',
  router,
  store,
  components: {
	App,
  },
  template: '<App/>',
});

需要注意的是，只有vue2.x支持Vue.prototype注册全局方法/变量/组件，vue3.x不再支持Vue.prototype