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', {
  /* ... */
})