vue3.x全局插件和组件

做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，例如 。

app.component('my-component-name', {
  /* ... */
})

2、使用 PascalCase

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

app.component('MyComponentName', {
  /* ... */
})