描述： vue组件的注册分为局部和
全局注册两部分，局部注册相对容易，不做赘述；而不同框架的注册方法又有所不同，下面针对vite框架和vue-cli框架的注册分别进行说明
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>
第六步：效果展示
