Vue CLI是Vue的官方腳手架工具，它可以幫助我們快速創建Vue項目，并且集成了很多常用的開發工具和插件。其中，頭部（Header）是Vue CLI生成的項目中常見的組件之一，下面我們來詳細講解一下Header的用法和實現。

在Vue CLI中，我們可以通過命令行工具快速生成一個Vue項目。比如，下面的命令會創建一個基于Webpack模板的Vue項目：

vue init webpack my-project

這個命令會下載Vue的Webpack模板，并在當前目錄下創建一個名為“my-project”的文件夾。在該文件夾中，我們可以看到一個名為“App.vue”的文件，其中就包含了一個簡單的Header組件：

<template>
<div class="header">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

在上面的代碼中，我們定義了一個名為“header”的div，其內部包含了一個h1標簽。通過Vue的數據綁定機制，我們可以輕松地將msg的值顯示在h1標簽中。

接下來，我們需要在Vue CLI生成的項目中使用Header組件。在“src/App.vue”中引入Header組件：

<template>
<div id="app">
<header-component />
<router-view />
</div>
</template>
<script>
import HeaderComponent from './components/Header'
export default {
name: 'app',
components: {
HeaderComponent
}
}
</script>

在上面的代碼中，我們通過import語句引入了Header組件，并在Vue實例的components中注冊了該組件。接著，在模板中使用“<header-component />”來使用Header組件，這里的“header-component”是Header組件的名字。

最后，在“src/components/Header.vue”中實現Header組件：

<template>
<div class="header">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: 'Header',
data () {
return {
title: 'My Header'
}
}
}
</script>

在上面的代碼中，我們定義了一個名為“header”的div，其內部包含了一個h1標簽。與之前不同的是，我們將msg替換成了title，并將組件名更改為了“Header”。這樣，我們就成功地自定義了Header組件。