不用全局plugin，项目在哭泣

  ↵

        对于做项目而言，一千个程序员有一千种解决方式。

       作为程序员，我认为每一个程序员都有为自己程序正言的机会。不过依个人愚见，虽然我们不能选择做什么样的项目，但是我们能选择把这个项目用什么样的形式来完成，无论是代码臃肿的犹如被胖揍的猪头，还是富丽堂皇的云端语法，抑或是归入凡尘的简朴素雅，都是我们的辛勤劳动。但，作为一个优秀的程序员，一个不甘心只用勤劳双手搬砖的码农，我们应该学会不断进步，不断突破，只要今天的自己能比昨天的自己更强，就已经足够了，毕竟，成长也不是一朝一夕，谁能指望自己能一口吃成一个胖子呢！

      进步，从此刻开始！

      这几天，公司与其他公司对接后，产品型号和后端协议都所改变，导致前端的一些验证信息也有所变化。虽然改动的不是很多，但是由于之前的负责人请假，加之很多页面的代码没有统一的进行管理，导致修改起来确实是挺麻烦的。不是很难，但就是废眼睛，搞得我现在都不太敢看电视剧和打游戏了，因为太消耗眼睛了，看久了容易变兔子，所以没事的时候建议闭目养神。

     言归正传，因为之前没有统一进行管理，所以导致一个项目中的每个模块都有些四分五裂，加之参数都大同小异，方法也都差不多，所以我想了一下，要不多要点时间来完成这个任务，直接把这些通用的功能和验证信息用全局配置好了，这样每个模块该用就用，也不影响，主要是好几个项目，然后每个项目好几个模块，都被各位老大哥四分五裂，让我这个小弟改起来很受伤，倒不如这次多花点时间配置好，下次就不用这么麻烦了，还可以喝喝茶，养养神，提前进入老年生活。于是我把建议和前端组长说了一下。啪，很快啊，组长二话不说就把任务时间给我加长了一倍!毕竟，年轻程序员讲武德，老大哥能不开心？以下是我的使用心得以及学到的一些知识，当然，还是和之前一样，都是用的简单demo，毕竟公司的代码肯定不能直接拿来用。

     myPlugin的意思是插件，那么插件可以做什么事情呢？

    先上结论：Plugins可以做4件事情：

    1.可以设置一些全局方法

    2.可以绑定一些过滤器，一些指令，全局组件

    3.可以设置一些全局混入

    4.可以定义一些Vue的原型属性

1.全局方法的使用，项目结构如下：

     这是vue-cli初始化的一个vue项目，不过以后可能不会再用webpack搭建项目了(毕竟vue-cli就是基于webpack创建的一个基础脚手架)，我也要开始学习使用Vite了，因为尤大不是都对webpack的老大哥说过了嘛，再也不回去webpack了！哎，希望有一天我也能对尤大说一句再也回去Vue了，哈哈，大家一起加油吧，说不定下一个尤大正在看着我的博客呢，哈哈，希望各位未来的尤大以及超越尤大的大帅逼大漂亮们给我点个赞，谢谢了

先上效果图：

项目代码如下：

HelloWorld.vue

<template>
  <div class="hello">
    <h1>myPlugin学习</h1>
    <p>全局方法的使用</p>
  </div>
</template>

myPlugin.js

const myPlugin = {}

//一定要在对象中使用install这个函数，因为这个install函数在源码的解析层面能起到很大的作用
//详情请看main.js注解
myPlugin.install = function(Vue,option){
    Vue.myGlobalMethod1 = function(){
        console.log("我是myPlugin的全局方法1!")
    }
    Vue.myGlobalMethod2 = function(){
        console.log("我是myPlugin的全局方法2!")
    }
}

export default myPlugin

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import VueRouter from 'vue-router'

Vue.use(Router)

const routes = [
  {
  path: '/',
  name:'HelloWorld',
  component: HelloWorld
  }
]

const routers = new VueRouter({
  //一个偏爱history模式的骚年，至于为什么不喜欢hash,是因为不喜欢后面带的"#"
  //不过hash模式就是通过"#"来定位的，所以它并没有做错什么
  //如果没有这个爱好的小伙伴直接用默认的hash模式就可以了
  mode: 'history',   
  routes
})

export default routers

main.js(请详看注解)

import Vue from 'vue'
import App from './App'
import router from './router'
import myPlugin from './libs/muplugin'  //在这里引入myPlugin对象

Vue.config.productionTip = false

//在Vue的源码解析层次，使用Vue.use()方法注册插件，这个插件可以是任意一个函数或者任意一个带有install属性的对象
//但是不管是函数还是带有install方法，第一个参数总是Vue对象，请详看myPlugin中install函数的写法，第一个参数写的就是Vue(当然，这只是一个形参，也可以写成其他的)
//不过建议各位把需要的功能和方法之类的封装在install方法中，这样不仅看起来美观大方，而且函数内的this始终指向myPlugin这个对象（自己定义），易于扩展
Vue.use(myPlugin)    //在Vue的全局使用myPlugin这个插件

Vue.myGlobalMethod1()   //直接调用

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  created(){    
    console.log("当前的生命周期为created") 
    Vue.myGlobalMethod2()      //在Vue的生命周期中使用
  }
})

我在这里示范一下，如果我们把myPlugin.js中的myPlugin对象中的install方法转为其他的方法，那么会发生什么？还是先上效果图：

各位可以看到，啪，很快啊，它立马就报错了!

现在的myPlugin.js

const myPlugin = {}

//我仅仅只是把install()改为了installed(),导致在Vue.use()加载这个插件的时候无法识别这个方法了
myPlugin.installed = function(Vue,option){
    Vue.myGlobalMethod1 = function(){
        console.log("我是myPlugin的全局方法1!")
    }
    Vue.myGlobalMethod2 = function(){
        console.log("我是myPlugin的全局方法2!")
    }
}

export default myPlugin

2.可以绑定一些过滤器，一些指令，全局组件（ 项目结构仍然不变 ,代码只提供改变了的文件，其余文件仍然沿用上续1中的代码）

先上效果图：

HelloWorld.vue

<template>
  <div class="hello">
    <h1>myPlugin学习</h1>
    <p v-my-component="" style="color:red">自定义指令</p>
  </div>
</template>

myPlugin.js

const myPlugin = {}

myPlugin.install = function(Vue,option){
    //全局指令，这个其实就相当于是v-model,v-if之类的，现在绑定了一个输出函数
    //只要有标签使用这个自定义指令，就会在控制台输出相应的指令
    Vue.directive('my-component',{
        bind(){
            console.log("现在这个数据是存在的！")
        }
    })
}

export default myPlugin

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import myPlugin from './libs/muplugin'  //在这里引入myPlugin对象

Vue.config.productionTip = false

Vue.use(myPlugin)    //在Vue的全局使用myPlugin这个插件

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.可以设置一些全局混入（项目结构仍然不变 ,代码只提供改变了的文件，其余文件仍然沿用上续1中的代码）

先上效果图：

myPlugin.js

const myPlugin = {}

myPlugin.install = function(Vue,option){
    Vue.mixin({
        mounted(){
            console.log("我是全局混入（mixin）函数")
        }
    })
}

export default myPlugin

HelloWorld.vue

<template>
  <div class="hello">
    <h1>myPlugin学习</h1>
    <p style="color:red">自定义指令</p>
  </div>
</template>

4.可以定义一些全局原型属性（项目结构仍然不变 ,代码只提供改变了的文件，其余文件仍然沿用上续1中的代码）

先上效果图：

myPlugin.js

const myPlugin = {}

myPlugin.install = function(Vue,option){
    //在Vue的原型上绑定属性，供全局使用
    Vue.prototype.realName = '兵锅锅你好！' 
}

export default myPlugin

HelloWorld.vue

<template>
  <div class="hello">
    <h1>myPlugin学习</h1>
    <p style="color:red">{{ this.realName }}</p>
  </div>
</template>

        想必大家看到此处，可能觉得plugin使用起来挺方便也挺简单的，但这仅仅只是因为我把这些功能都拆开讲解了，而且都是用的最简单的案例。如果真的想深入学习，还是得在项目中实战，但是这些思想其实都是相通的，这些基础就好比是砖瓦，是各种工具，项目就是房子，所有的工具都有了，只有不断地练习，不断地学习，不断的磨练，才能造就好房子，就好比打太极，一定要选择69的老同志下手，哈哈！

        加油吧，各位，我们都是最棒的，奥里给！