描述： vue组件的注册分为局部和全局注册两部分，局部注册相对容易，不做赘述；而不同框架的注册方法又有所不同，下面针对vite框架和vue-cli框架的注册分别进行说明

一、vite框架中全局组件注册

第一步：创建文件

在src目录下创建components文件夹，并且创建组件文件，和用于引入组件的ts或者js文件

第二步：编写组件文件

<template>
  <h1>只是一个组件11</h1>
</template>
<script>
export default {
//组件名是必须的，如果是vue3项目使用的是setup语法糖，可以直接在标签上通过name属性定义组件名
  name: "MyComponent", 
};
</script>

补充：使用setup语法糖给组件命名

• 安装 vite-plugin-vue-setup-extend插件
• 注册插件

//vite.config.ts文件
import { defineConfig } from "vite";
import path from "path";
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from "vite-plugin-vue-setup-extend"; //引入插件
export default defineConfig({
  plugins: [vue(), VueSetupExtend()], //注册插件
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    }
  },
});

• 插件使用

//这里要特别注意，如果script内是空的，是不可以组件命名的，实在没有内容就加一行注释放在里面吧
<script setup name="MyComponent" lang="ts">
//MyComponent
</script>

第三步：引入组件

引入组件的方法又有逐个引入和批量引入，逐个引入就不说了，直接说批量的

// index.ts文件
const comps: any = import.meta.glob("./*/index.vue", { eager: true }); // eager：true 表示全部导入
export default {
  install: function (app: any) {
    Object.keys(comps).forEach((key) => {
      // 注册组件为全局组件
      const vueComp = comps[key].default;
      // 注册组件
      app.component(vueComp.name, vueComp);
    });
  },
};

也可以

export default function (app: any) {
    Object.keys(comps).forEach((key) => {
      // 注册组件为全局组件
      const vueComp = comps[key].default;
      // 注册组件
      app.component(vueComp.name, vueComp);
    });
}

第四步：注册组件

//main.ts
import Components from "./components/index"; //导入
app.use(Components); //注册

第五步：组件使用

// 使用模块
<template>
  <h1>首页</h1>
  <MyComponent /> <MyComponent /> <MyComponent /> <MyComponent />
  <input type="text" v-test="'测试数据'" />
</template>

第六步：效果展示

二、Vue-cli 框架中全局组件注册

第一步：创建文件

• 在src目录下创建components文件夹，并且创建组件文件，和用于引入组件的js文件
  

第二步：编写组件文件

<template>
  <h1>这是组件22</h1>
</template>
<script>
export default {
//这里需要定义一个组件名
  name: "testComponent",
};
</script>

第三步：引入组件

• 引入组件的方法又有逐个引入和批量引入，逐个引入就不说了，直接说批量的

// index.js文件
const comps = require.context("../components", true, /\index.vue$/); //参数1：文件路径 ；参数2：是否搜文件夹内部 ；参数3：匹配文件的正则
export default {
  install: function (Vue) {
    comps.keys().forEach((key) => {
      Vue.component(comps(key).default.name, comps(key).default);
    });
  },
};

也可以

const comps = require.context("../components", true, /\index.vue$/); //参数1：文件路径 ；参数2：是否搜文件夹内部 ；参数3：匹配文件的正则
export default function (Vue) {
  comps.keys().forEach((key) => {
    Vue.component(comps(key).default.name, comps(key).default);
  });
}

第四步：注册组件

//main.js
import Components from "./components/index"; //导入
app.use(Components); //注册

第五步：组件使用

// 使用模块
<template>
  <div>
    <testComponent />
    <testComponent />
    <testComponent />
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

第六步：效果展示