在home的資料夾下，在建立一個資料夾components，裡面存放著home所要用的元件
我們現在要做的就是header元件

我們需要在Home.vue下面 匯入我們要用的小元件的包，然後在export default中引用components：{
HomeHeader
}
然後編寫home-header元件

這裡關於CSS樣式
rem是相對於根元素，這樣就意味著，我們只需要在根元素確定一個px字號，則可以來算出元素的寬高。本文講的是如何使用rem實現自適應。
rem這是個低調的css單位，近一兩年開始嶄露頭角，有許多同學對rem的評價不一，有的在嘗試使用，有的在使用過程中遇到坑就棄用了。但是我對rem綜合評價是用來做web app它絕對是最合適的人選之一。

rem是什麼
rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字型大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

為什麼web app要使用rem？
這裡我特別強調web app，web page就不能使用rem嗎，其實也當然可以，不過出於相容性的考慮在web app下使用更加能突顯這個單位的價值和能力，接下來我們來看看目前一些企業的web app是怎麼做螢幕適配的。
最重要的功能rem能等比例適配所有螢幕

上面講了一大堆目前大部分公司主流的一些web app的適配解決方案，接下來講下rem是如何工作的。

上面說過rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設定html的字型大小就可以控制rem的大小。舉個例子：

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}
 

上面的width，height變成了上面結果的兩倍，我們只改變了html的font-size，但.btn樣式的width,height的rem設定的屬性不變的情況下就改變了按鈕在web中的大小。

其實從上面兩個案例中我們就可以計算出1px多少rem:

第一個例子：

120px = 6rem * 20px(根元素設定大值)

第二個例子：

240px = 6rem * 40px(根元素設定大值)

推算出：

10px = 1rem 在根元素（font-size = 10px的時候）；

20px = 1rem 在根元素（font-size = 20px的時候）；

40px = 1rem 在根元素（font-size = 40px的時候）；

在本例項中，我們採取的是font-size 50px

由於CSS我學術不精，主要會涉及到很多關於CSS的問題
float屬性
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。

flex屬性
flex 屬性用於設定或檢索彈性盒模型物件的子元素如何分配空間。

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

注意：如果元素不是彈性盒模型物件的子元素，則 flex 屬性不起作用。

怎麼讓div的元素在一條橫線上，很簡單加float
浮動就好了 每個元素都 float:left;就在一條橫線上了！~

插播一條響應式佈局
響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。
響應式佈局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
display屬性中的flex
前端佈局神器display:flex
2009年，W3C提出了一種新的方案–Flex佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前已得到所有現在瀏覽器的支援。
Flex佈局是什麼
Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex佈局。
所以在本例項中div class=header就相當於一個彈性盒子
包含了三個left right input 三個div

基本概念
採用Flex佈局的元素，被稱為Flex容器(flex container)，簡稱“容器”。其所有子元素自動成為容器成員，成為Flex專案(Flex item)，簡稱“專案”。

text-align 屬性規定元素中的文字的水平對齊方式。

該屬性通過指定行框與哪個點對齊，從而設定塊級元素內文字的水平對齊方式。通過允許使用者代理調整行內容中字母和字之間的間隔，可以支援值 justify；不同使用者代理可能會得到不同的結果。