前置：在我们日常开发的时候，会发现elementUI默认的组件通常都是不满足的，都需要根据项目更改参数去实现
问题：在团队协作中，包括人员流动过程中，我们会发现，每个组件用的组件参数都不一样，这会让我们项目不够统一
解决：
方法一：
大佬说：“简单，我二次封装一下。”
小菜鸡，我：“怎么实现的？”
大佬：“简单，我们通常都是做一下操作：”
import Vue from "vue" import element from "element-ui" Vue.use(element)
大佬： “现在我们改一下，改成以下：“
// 写一个全局组件，然后Vue.component()就完事 <script> import {Input} from 'element-ui' export default { components: {'el-input': Input}, render(h) { let attrs = Object.assign( { placeholder: this.$attrs.placeholder || '', maxlength: this.$attrs.maxlength || this.$attrs.type === 'textarea' ? 200 : 20, }, this.$attrs, ) return h('el-input', { props: attrs, attrs, on: this.$listeners, }) }, } </script>
小菜鸡，我：“大佬牛逼啊！！！终于不用被测试天天说没有做长度限制了，大佬解放劳动力啊！！”
大佬：“其他的一样可以使用。“
小菜鸡，我：”element那么多组件，都得拷贝一份，然后改巴改巴，工作量好大啊！并且好多都是重复工作啊！“
大佬：”麻烦？没事，我们换一种。“
方法二：
大佬：”讲方法二前，我们必须得了解一下vue的生命周期“
小菜鸡，我（举手）：”我知道，我知道！vue有8大生命周期，巴拉巴拉…………“
大佬：”停！！！我们看看源码，别再人云亦云了。看下图：“
大佬：”常用的确实8个。但是，我们想想，我们通常引用插件，例如：elementUI。这些东西在什么时候 ‘注入’ 的？“
小菜鸡，我（冒汗）：”额，娥，鹅，2……“
大佬：”好，我们再看看源码！如下图：“
大佬：”我们看到了initGlobalAPI方法的调用，我们到这个方法里面，根据引用在 ’global-api‘ 文件夹下面，看代码：“
大佬：”我们先忽略其他东西，然后根据 ‘优秀的命名’ 我们猜测vue初始化了4个东西，我们现在看第一个，如下图：“
大佬：”这里就对install进行处理了，而Vue.use就是调用install方法，联想一下，是不是串起来了？“
小菜鸡，我：”#&%???? 嗯嗯嗯嗯，我懂了。“
大佬：”算了，我们看看官方文档。“
https://cn.vuejs.org/v2/guide/plugins.html
大佬：”看图：“
大佬：”结合我们之前看的源码，就知道了，插件在最早的时候就初始化了。在想一下我们项目中的main.js，一般插件的use都是在new Vue实例之前的。”
小菜鸡，我：“我这次真的懂了，但是，跟我们搞elemenUI有什么关系啊？“
大佬：”搞完了这些东西，那我们来看一下我们Vue.use（element）发生了什么，无图无真相，看图：”
大佬：“我们看看输出了什么。”
小菜鸡，我：“哇！好多东西啊！”
大佬（无语）：“我们再打开一个我们很熟悉的，Pagination（分页）”
大佬：“是不是很熟悉？”
小菜鸡，我（严肃脸）：“嗯，，，，，不熟悉！”
大佬（无语）：”我们再看elementUI的官网，对比一下，看图！！！！“
小菜鸡，我（抢答）：”我懂了，我懂了。跟输出的是一样的，结合刚刚讲的：“
1、new Vue前要执行vue.use
2、vue.use才是element被引用的时候
小菜鸡，我：”意思就是说：我们在vue.use前，直接将element这个json对象的默认值改了就行了。例如：“
Element.Pagination.props.layout.default = 'total, sizes, prev, pager, next, jumper'
大佬：”没错，注意一下，有些返回的并不是JSON，而是Funciton"
----------转载请注明出处-------------