目录结构
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a928a8e404a3f361fdda9120391e8967.png)
在components文件夹中创建一个.vue文件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/036f1fd6ed357dc5ff079fc0842f5188.png)
注意:如果没有Vue Component选项,首先要去下载vue.js的插件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/98dd05bcdee2068fd941779067afb81e.png)
我在这里的栗子是创建了头部.vue,主体.vue,底部vue三个组件.
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/01fad5870805a58c9731e6f622c2ad43.png)
全局注册组件
在main全局注册
进入main.js,将其他默认的东西删除,然后全局注册
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6c9dc66b1b9c7be13d6a401ca31250a3.png)
在App.vue中直接使用
删除默认的代码,然后直接使用
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ee0ba0b8124be46faa73e1a4cc7b6d62.png)
最终效果
进入项目根路径,进入cmd,启动
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7c688093852ab1ba5e2dfb7ef0627732.png)
最终效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/40fd3e8dcc152f3469c49e5ce565c6c8.png)
本地注册组件
在App.vue中直接引入组件,然后再使用
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6a79140db9fe37077e1f476c3f67cdcb.png)
最终效果与全局注册一样,但是就是只能在App.vue中使用,其他组件中不能使用.