前言：本章把個人中心頁面寫完，基本上這個項目的前端頁面製作方面的工作大體就完成了，其它不足的我們在前後端交互的時候繼續完善。 GitHub：https://github.com/Ewall1106/mall
1、新建
- 老規矩，我們還是複製一份
test.vue文件並重命名爲me，作爲個人中心的頁面。 - 路由註冊
新建個人中心頁面
這樣我們個人中心的頁面就算是建立完成了。
2、基本結構及樣式
（1）頂部欄
- 因爲頂部欄這一塊經常使用，所以我還是把它抽離成了一個組件，結構和樣式都從以前的頁面複製粘貼而來。
- 因爲這個組件的名稱是要有變化的，所以我們使用了
slot插槽來完成這個功能。 （這裏推薦一篇文章：深入理解vue中的slot與slot-scope）
slot插槽的使用 | slot插槽的使用 |
|---|
（2）暱稱頭部、歷史及其它模塊
- 添加一些其它的模塊，就是一些簡單的佈局了。
暱稱頭部、歷史及其它模塊
3、小結
- 我們先來看看個人中心頁面的基本完成效果：
個人中心頁面的基本完成效果
- 至此，我們這個項目的前端主要頁面就寫完了，一共囉嗦了40章，其中的知識點還是挺多的。當然，還有很多其他的子級頁面，我們就在後面前後端交互的時候邊做邊補充。
- 下章，我們講下
MongoDB的安裝及入門。