當我們使用Vue進行開發時，有時需要在頭部添加一些通用的代碼來保證頁面的正常運行。這些通用的代碼通常包括樣式表、JavaScript、meta標簽等。因此，我們需要學會如何在Vue中加入這些頭部代碼。

Vue提供了一個非常方便的解決方法，在Vue組件中添加一個metaInfo屬性。這個屬性包含了頭部中需要加入的所有元素，是一個對象類型。

export default {
metaInfo: {
title: '這是一個標題',
meta: [
{ name: 'keywords', content: 'Vue, 前端開發' },
{ name: 'description', content: '這是一個Vue的例子' }
]
}
}

上面的代碼中，我們使用了兩個meta標簽，一個是用來設定SEO優化的keywords，另一個是用來設定網站的描述description。同時，我們還設定了一個標題title。

除了meta標簽之外，我們可以在metaInfo屬性中加入其他需要的元素。比如一個樣式文件：

export default {
metaInfo: {
link: [
{ rel: 'stylesheet', href: 'http://example.com/style.css' }
]
}
}

上面的代碼中，我們使用了link標簽來引入一個樣式文件。href屬性指明了樣式文件的鏈接。

在實際的開發中，我們可能需要通過JavaScript來動態設定一些元素的內容。這時候，我們可以在metaInfo屬性中使用Vue提供的函數來設定。

export default {
metaInfo: {
title() {
return this.title || '默認標題';
},
meta() {
return [
{ name: 'keywords', content: this.keywords || 'Vue, 前端開發' },
{ name: 'description', content: this.description || '這是一個Vue的例子' }
];
}
}
}

上面的代碼中，我們使用了函數來設定title和meta標簽。這個函數可以使用當前組件的數據來動態生成內容。比如，當用戶沒有設定title時，我們使用默認的標題。

總的來說，Vue提供了非常便利的方法來加入頭部的代碼。metaInfo屬性提供了一種非常簡單的方式來設定整個頁面的頭部元素，可以讓我們更快地開發，更方便地維護我們的頁面。在實際的開發中，我們可以根據需要來靈活使用這個屬性，設定各種不同的頭部元素。