前言：項目準備工作說了很久，不知道大家學會了沒有？今天開始我們開始正式搭建頁面，先從首頁開始，在搭建頁面的過程中，我也會將vue的知識點在其中穿插講解，但是你最好是提前看看官方文檔。愛掏網 - it200.comok，今天我們來講下組件，然后搭個頭部組件實現復用；
GitHub：https://github.com/Ewall1106/mall
1、官方解讀
（1）官方怎么說的啊？組件可以擴展HTML元素，封裝可重用的代碼，這句話中，記住可重用這幾個字是很重要的，一般來說這就是答案——即到底什么時候應該把一部分的代碼抽離出來構成組件？
來自官網
（2）關于組件的命名
組件的命名我在項目中統一用kebab-case （短橫線）表示：
組件命名
（3）組件的復用
可以將組件進行任意次數的復用，舉個栗子如下圖，每次點擊按鈕，每個組件都會各自獨自維護它的count；因為每用一次組件，就會有一個它的新實例被創建。愛掏網 - it200.com
組件復用
（4）其它
還有很多關于組件使用的很重要的內容，如組件之間數據的傳遞，組件的事件等等，我們后面在項目中具體用到了再穿插。愛掏網 - it200.com
2、組件的運用-創建頭部組件
（1）新建一個myHeader頭部組件
ok，我們進入components文件夾里面新建一個myHeader.vue組件，有helloworld.vue的刪掉或者直接改個名直接用都是可以的，好了，代碼敲完了以后變成了這幅模樣：
myHeader.vue
仔細看看上圖，一個myHeader.vue的頁面分為了三個部分，里面是放html代碼的是為結構，里面寫js是為邏輯，里些css是為樣式，這就是vue里面的結構、樣式、邏輯三者分離，我就不多說了，里面我序號標記了幾個小要點，我說道一下：
這個
name大家應該明白，就是對這個組件的命名，具體表現在哪里，賣個關子，我們待會講；data標記出來的意思就是記得data必須函數；第3點就是style里面這里有個
scoped，其實上面注釋已經講得很清楚了，我佛系翻譯一下就是你加了css就只會作用于這個組件、這個頁面，不會污染。愛掏網 - it200.com
（2）組件的引入
- ok，我們在div里面加個helloworld便于展示：
往myHeader里面添加內容
- 然后在
home.vue里面引入:
home.vue
怎么引入的？import照著上圖引入然后components屬性里面注冊一下，我這里講下命名規范，import后面請使用首字母大寫的形式MyHeader，template里面使用的時候用短橫線連接法my-header 。愛掏網 - it200.com
（3）組件的復用
組件的復用就很簡單了，寫復制粘貼一下就行，記住，組件都是獨立的。愛掏網 - it200.com
組件復用
localhost
（4）最后我們在回到第（1）點下面關于組件里面的name屬性具體體現在哪里的問題
??我們打開vue的插件，name屬性的值就是組件的名字，你可以自己修改name屬性看看效果：
vue devtools
3、然后，我修改myHeader.vue組件里面得內容，這就是我們的頭部
加點樣式：
Hxx-Luxury Store
4、題外話
（1）我有想了一會兒，到底這個小商場項目的場景是面向pc端還是手機端的運用呢？最后我覺得還是緊跟時代潮流，做成移動端的商場，有點webApp的意思，我覺得這樣更具有實際意義，所以，以后看頁面按完F12后請選取手機調試模式【抱拳】；
（2）里面很多小問題但也很重要的，比如import ... from后面為什么用@的問題，越到后面我就不會寫的很細了，因為篇幅和文章側重點的問題，所以，大家多培養自己自學google能力，也歡迎留言；
（3）如果有本章相關知識的學習鏈接歡迎留言分享，開源和分享精神我覺得是很重要的，感謝。愛掏網 - it200.com
參考鏈接
https://cn.vuejs.org/v2/guide/components.html