vue自定义公共组件

Vue环境安装完成后，开始自定义公用组件
1、全局组件
在src/components目录新建common目录，创建header.vue，写入代码：

<template>
    <div>
        <h1>header in here</h1>
    </div>
</template>
<script>
    export default{}
</script>

在src目录下的main.js,加入代码：

import headerTop from "./components/common/header"   //引入组件
Vue.component("head-view",headerTop);

在要用的页面加入标签<head-view></head-view>就会出现内容了

2、局部引用
如图，即可