1. 我们在 Vue3 项目根目录下创建 packages 文件夹
2. 创建 components 文件夹和 index.js 文件,并在 components 文件夹下添加 HelloWorid.vue 和 Icon.vue 组件
index.js
// 1.引入 components 文件夹下组件
import HelloWorld from "./components/HelloWorld.vue";
import Icon from "./components/Icon.vue";
// 2.全局注册
const myPlugin = {
install(app) {
app.component("HelloWorld", HelloWorld);
app.component("Icon", Icon);
},
};
// 3. 导出
export default myPlugin;
3. 在 main.js 中导入
main.js
import { createApp } from "vue";
import App from "./App.vue";
// 1.引入
import myPlugin from "../packages/index"
const app = createApp(App);
// 2. 挂载
app.use(myPlugin)
app.mount("#app");
4. 使用
<template>
<HelloWorld msg="Vite + Vue" />
<Icon iconName="icon-a-Group788" />
</template>