Vue Element是一個基于Vue.js 2.x的UI組件庫，采用了element-ui自己的樣式風格，同時還引入了Material Design風格的布局。

搭建博客是很多前端開發者都想要嘗試的一個項目，使用Vue Element可以簡便快捷地實現前端界面的設計和開發。

要使用Vue Element搭建博客，首先需要安裝Vue和Element。使用npm在終端輸入以下命令：

npm install --save vue
npm install --save element-ui

在項目中引入Vue和Element庫：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

接下來，可以根據項目需求，在src目錄下新建components文件夾用于存放組件文件，例如新建一個Header.vue文件作為博客頁頭組件。

Header.vue的基本代碼如下：

<template>
<div>
<el-header>
<el-row :gutter="10">
<el-col :span="8">
</el-col>
<el-col :span="8">
<div class="logo"><i class="el-icon-loading"></i></div>
</el-col>
<el-col :span="8">
</el-col>
</el-row>
</el-header>
</div>
</template>
<script>
export default {
name: 'Header'
}
</script>
<style scoped>
.logo {
display: inline-block;
width: 48px;
height: 48px;
font-size: 28px;
text-align: center;
line-height: 48px;
background: #eee;
border-radius: 50%;
}
.el-icon-loading {
color: #fff;
opacity: .7;
}
</style>

該組件包含了一個博客頁頭，使用了Element的Header、Row、Col等組件進行布局和樣式設置。

可以在App.vue中引入這個Header組件：

<template>
<div class="app">
<Header/>
</div>
</template>
<script>
import Header from './components/Header.vue';
export default {
name: 'App',
components: {
Header
}
}
</script>
<style>
.app {
width: 100%;
height: 100%;
margin: 0 auto;
}
</style>

這里引入了Header組件，并在template中使用了Header標簽。

通過上面的代碼，我們完成了一個非常簡單的博客頁面的頭部設計，大家可以根據自己的需求繼續添加內容。