我们在利用vue的cli来做开发的时候，我们会引入一些框架以及各种插件，我们经常能看到类似于
Vue.use(Element, {
size: Cookies.get('size') || 'medium'
})
Vue.use(Vant)
这样的代码，老弟，牛X哈，这代码一看就高大上呀。
实际上，这个是通过vue官方暴露出来的开发插件的install方法来实现的，下面我弟弟就教你如何来实现这种“牛X”操作.
我们先来看官网给出的install解释
QQ截图20201028104308.png
看起来也不过如此嘛，让我们手动操作一下！
我们先来进行工具类的封装
首先呢，我们在我们的utils（你随意开心命名）文件夹下定义一个叫tools.js的js文件
然后呢。
//tools.js
const exampleFunc {
install (Vue, options) {
Vue.prototype.customerTools = {
//这里随便粘贴了两个方法作为示例
//深度拷贝
deepClone(source) {
if (!source && typeof source !== 'object') {
throw new Error('error arguments', 'shallowClone');
}
const targetObj = source.constructor === Array ? [] : {};
for (const keys in source) {
if (source.hasOwnProperty(keys)) {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = deepClone(source[keys]);
} else {
targetObj[keys] = source[keys];
}
}
}
return targetObj;
},
//获取网页url？后面的参数值
getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
}
}
export default exampleFunc
至此，我们的工作进行了99%，剩下那1%，我们在src/main.js文件里面进行，这个是我们程序的入口文件，主要是用来加载各种公共组件和方法的
//main.js
import exampleFunc from './utils/tools'
Vue.use(exampleFunc)
//好了，没啦。是不是看起来很简单？
接下来我们就在各种页面里调用方法就可以啦
//example.vue
mounted() {
let array = [...]
//尝试调用一下深拷贝方法，ok！
this.customerTools.deepClone(array)
},
工具类函数被我们成功送上天了。下面就剩组件了，到这里，怎么利用install创建全局组件我们是不是心里都有点笔数了，一奶同胞呀。
我们创建一个a.vue在main.js同级的文件夹views下
//a.vue
<template>
<div>
组件
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style
然后呢，我们在统计文件夹下创建一个js文件，就叫a-export.js
//a-export.js
import acomponent from './Cmponent.vue'
const avue = {
install (Vue,options) {
Vue.component('a-vue',acomponent)//前面的a-vue就是我们后面使用的组件名称，后面的acomponent是我们导入的组件文件
}
}
export default avue
然后呢，跟我们创建工具类方法引用一样
//main.js
import avue from './views/a-export.js'
Vue.use(avue)
然后你页面就可以使用这个avue组件啦
//某某某.vue
<template>
<div>
<a-vue><a-vue>
</div>
</template>
装逼完毕，吕某人吃饭去了~~~~感觉对您有用的麻烦给个小心心，谢谢！
