vite基础学习笔记：11.组件拆分

说明：自学做的笔记和记录，如有错误请指正

1. 全局组件

（1）创建组件

在components文件夹下创建top（头部组件）和bottom（尾部组件）文件夹如下：

 （2）注册组件

在main.ts中引入并注册全局组件

 代码如下：

//引入全局组件
import Top from '../src/components/top/index.vue';
import Bottom from '../src/components/bottom/index.vue';
const app = createApp(App);

app.component('Top',Top);
app.component('Bottom',Bottom);

app.mount("#app");

（3）使用组件

 在App.vue中使用全局组件

 

完善后组件代码如下：

components/top/index.vue

components/bottom/index.vue

App.vue

显示如下：

2. 局部组件

（1）创建组件

在components文件夹下创建组件文件夹如下：

在index.vue文件中写以下代码进行相关测试

（2）引入组件

 

（3）使用组件

具体局部组件使用Element Plus，具体可看下一内容