做vue项目的时候，总有一些小组件或者工具类，我们需要频繁的使用，每个使用的地方再去引用相对比较麻烦，当然也有一些好处，尤其是配合组件异步加载的时候，能最更好的减少项目首次加载的体积，从而优化一些体验。
全局js插件
因为vue3.x js插件的全局使用也有调整，这里稍微说下简易的全局js引入。
#比如，有tools.js如下：
const tools = {
isIos: function () {
const agent = navigator.userAgent;
return !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
},
}
export default tools
# main.js 如下引入
import tools from '@/utils/tools'
app.config.globalProperties.$tools = tools;
在组件内就可以如此使用了
console.log(this.$tools.isIos());
全局vue组件
1、简易实用
正常定一个组件，如：global-component.vue，并且实现这个组件。
# main.js 里面，引入如下：
import GlobalComponent from '@/components/global-component.vue'
app.component('global-component', GlobalComponent)
现在可以直接在项目中的其他组件里面直接使用GlobalComponent这个组件了，使用如下：
<template>
<global-component></global-component>
</template>
2、优雅
正常定一个组件，如：global-component.vue，并且实现这个组件。
新建一个js文件，如：global-comp.js，实现如下：
import GlobalComponent from './global-component.vue'
export default {
install:function(Vue){
Vue.component('global-component', GlobalComponent);
}
}
# main.js 里面使用这个js：
import GlobalComponent from '@/components/global-comp.js'
app.use(GlobalComponent)
现在可以直接在项目中的其他组件里面直接使用GlobalComponent这个组件了，使用如下：
<template>
<global-component></global-component>
</template>
注意事项：（组件名大小写）
在字符串模板或单个文件组件中定义组件时，定义组件名的方式有两种：
1、使用 kebab-case
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
app.component('my-component-name', {
/* ... */
})
2、使用 PascalCase
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
app.component('MyComponentName', {
/* ... */
})
