目標：從零開始實現(xiàn)一個登錄頁，體驗真正的程序開發(fā)
好久沒來了，最近也是比較忙（懶）。
看到這個標題，可能有些同學(xué)會很失望：都學(xué)到第9章了，才搞個登錄頁？ 未免有些太低端了吧！
其實，看似簡單的登錄頁，并不簡單，要注意的地方不少，下面我們一步一步來體驗下。
本章會有比較多的布局/調(diào)樣式的內(nèi)容，如果對css不了解，建議先花點時間看一下這個教程
https://www.runoob.com/css/css-tutorial.html
本來也想把css單獨做一篇來講的，但是這個教程寫的太好了，自己再啰嗦沒有意義
代碼部分接上回，先把views/Login.vue這個文件備份下，之前我們在里面寫了點東西的，不要浪費了。
然后把Login.vue里面的代碼刪掉，像這樣
運行yarn serve啟動服務(wù)，訪問地址http://localhost:8080/#/login，可以看到一個空白頁面。
現(xiàn)在我們往里面填東西，最基本的想法是要有用戶名和密碼的輸入框，還要一個登錄按鈕。
之前說過，提交內(nèi)容一般用表單。
打開element表單的文檔?https://element.eleme.cn/#/zh-CN/component/form
把這個典型表單的代碼抄進去，像這樣
保存，刷新瀏覽器頁面，已經(jīng)看到內(nèi)容了，很順利
但是這個輸入框有點太長了，占滿了整個瀏覽器，有點難看。
我們先在表單上加點樣式，把尺寸弄小點。el-form標簽上添加class
然后在style區(qū)域添加css樣式，設(shè)置寬度400像素，高度300像素。
（如果這個樣式表看不懂，建議先去看我上面推薦的css教程，翻一翻有個大概印象）
保存，再看看頁面，好看很多了有沒有
現(xiàn)在我們把里面亂七八糟的東西干掉，只留兩個輸入框，一個按鈕
再看看頁面，有點形狀了！
試試在用戶名這里輸入點東西看看，發(fā)現(xiàn)密碼框的內(nèi)容也會自動同步
這是因為密碼輸入框的v-model和用戶名的一樣，綁定了相同的數(shù)據(jù)源。
試試把這個v-model刪掉看看，發(fā)現(xiàn)密碼輸入框都不能輸入了！
我們把數(shù)據(jù)源定義這里改一下，增加password，不要的都干掉，像這樣
同時，密碼輸入框的v-model改成form.password
再看看頁面，可以愉快的輸入了
但是這個密碼，有點尷尬，沒有顯示成星號，問題不大，把type設(shè)置成password就好了
這里我還加了個show-password，這樣最右側(cè)會出來一個小圖標，可以顯示和隱藏密碼，看起來很專業(yè)！
現(xiàn)在還有個小問題，就是我們的表單擠在左上角，有點難看。一般來說都是居中的
我們來調(diào)下樣式表，設(shè)置表單的位置，像這樣。（position這個樣式建議仔細看看教程）
再看下頁面，貌似劇中了，其實有點歪，表單的左上角這個點是居中的，整體偏右下
現(xiàn)在我們用外邊距margin，把這個偏移量校正
注意這個寫法，偏移量是表單尺寸的一半。不管屏幕尺寸怎么調(diào)整，都是可以正好居中的。
太棒了！ 可以自動居中，還能自適應(yīng)屏幕尺寸，很不錯。
再觀察下我們這個頁面，大面積慘白的背景，顯得有點單調(diào)，試著加個背景色看看。
我們先在表單元素的最外面，加一個div，然后把這個div設(shè)置成全屏幕那么大，再加上背景樣式就好了
樣式如下
觀察下效果，比之前還難看了！表單內(nèi)容看不清了， 而且左側(cè)和頭上都有漏風(fēng)
先解決漏風(fēng)的問題，在.bgDiv里面加上?left:0px;top:0px; 把這個div對齊到最角上，問題解決。
再解決表單難看的問題，現(xiàn)在表單是繼承了.bgDiv的背景色，我們給他也加一個不一樣的背景
效果如下，有點難看！
繼續(xù)調(diào)樣式，加上內(nèi)邊距padding，把表單里的子元素，和表單邊框分開點
再看看，舒服多了，但是我們這個表單，像一張紙漂在上面，沒有質(zhì)感
現(xiàn)在我們給表單加個邊框，顯得厚重一點
再觀察下，有點進步了
我們再給邊框加個陰影，加強立體感
有點立體感了
現(xiàn)在系統(tǒng)沒有名字，我們給加個標題
樣式不能少
看看現(xiàn)在的效果，label和標題不對齊，有點難看
把label改成placeholder,代碼如下
頁面效果
現(xiàn)在登錄按鈕顯得有點可憐，用樣式把寬度設(shè)成100%
看看效果，整齊了
再優(yōu)化一下，給兩個輸入框加上圖標（參考element文檔：https://element.eleme.cn/#/zh-CN/component/icon）
再瞅瞅，圖標有了。但是這個大片藍色的背景，還是丑，很單調(diào)
我們把這個背景改成漸變色試試（漸變色除了線性的，還可以設(shè)置徑向，可以自己看教程試試效果）
再看效果，感覺舒服太多了！ 徹底擺脫了丑陋
更多的時候，我們是放一張背景圖，我們試一下
先找一張圖片放到這里
然后在背景的div上加:style="{backgroundImage:'url('+require('@/assets/bg.jpg')+')'}"
這里是動態(tài)加載的圖片，不用require直接在css里面寫路徑是不行的（也可能有好辦法我沒找到）
樣式里面，設(shè)置圖片不重復(fù)，完全覆蓋
看看效果，還不錯，科技風(fēng)。
背景圖也可以弄一個很小的圖片，設(shè)置成repeat，這樣可以省流量，多大屏幕都不會模糊。自己可以體驗下
現(xiàn)在我們把多語言加進去，沒這個顯得不太專業(yè) （LangSelect.vue是之前做的模塊，正好用上）
設(shè)置下樣式，把這個下拉框擺到右邊，和輸入框右對齊
看看樣子，很不錯
不過我們現(xiàn)在頁面上的字符串都是寫死的中文，下拉框點了沒起作用
改成多語言的寫法，資源文件里別忘了 （參考下第4章）
再看看，多語言有了，高大上！
如果是面向互聯(lián)網(wǎng)的系統(tǒng)，一般都會有忘記密碼和新用戶注冊的功能，我們給他加上
弄兩個文字按鈕，放到登錄按鈕下面，靠右就行了
（之前設(shè)置的窗口高度有點大，從300px調(diào)整到240了）
寫樣式的時候，代碼放置的順序，最好和元素在頁面上的順序一致。
因為樣式會越來越多，亂放的話自己找起來麻煩
看一下，是不是像一個能交差的作品了？
外觀上看是不差了，但是有個大問題，就是沒有任何功能！ 點了登錄按鈕啥也不能干。
不過，貼圖貼的有點累了，要休息下，剩下的事情只能第10章來解決了，本章完。
