目標(biāo)：從零開始實(shí)現(xiàn)一個(gè)登錄頁赡若，體驗(yàn)真正的程序開發(fā)
好久沒來了达布，最近也是比較忙（懶）。
看到這個(gè)標(biāo)題逾冬，可能有些同學(xué)會(huì)很失望：都學(xué)到第9章了黍聂，才搞個(gè)登錄頁？ 未免有些太低端了吧身腻！
其實(shí)产还，看似簡(jiǎn)單的登錄頁，并不簡(jiǎn)單嘀趟，要注意的地方不少脐区，下面我們一步一步來體驗(yàn)下。
本章會(huì)有比較多的布局/調(diào)樣式的內(nèi)容她按，如果對(duì)css不了解牛隅，建議先花點(diǎn)時(shí)間看一下這個(gè)教程
https://www.runoob.com/css/css-tutorial.html
本來也想把css單獨(dú)做一篇來講的，但是這個(gè)教程寫的太好了尤溜，自己再啰嗦沒有意義
代碼部分接上回倔叼，先把views/Login.vue這個(gè)文件備份下，之前我們?cè)诶锩鎸懥它c(diǎn)東西的宫莱，不要浪費(fèi)了丈攒。
然后把Login.vue里面的代碼刪掉，像這樣
運(yùn)行yarn serve啟動(dòng)服務(wù)，訪問地址http://localhost:8080/#/login巡验，可以看到一個(gè)空白頁面际插。
現(xiàn)在我們往里面填東西，最基本的想法是要有用戶名和密碼的輸入框显设，還要一個(gè)登錄按鈕框弛。
之前說過，提交內(nèi)容一般用表單捕捂。
打開element表單的文檔?https://element.eleme.cn/#/zh-CN/component/form
把這個(gè)典型表單的代碼抄進(jìn)去瑟枫，像這樣
保存，刷新瀏覽器頁面指攒，已經(jīng)看到內(nèi)容了慷妙，很順利
但是這個(gè)輸入框有點(diǎn)太長了，占滿了整個(gè)瀏覽器允悦，有點(diǎn)難看膝擂。
我們先在表單上加點(diǎn)樣式，把尺寸弄小點(diǎn)隙弛。el-form標(biāo)簽上添加class
然后在style區(qū)域添加css樣式架馋，設(shè)置寬度400像素，高度300像素全闷。
（如果這個(gè)樣式表看不懂叉寂，建議先去看我上面推薦的css教程，翻一翻有個(gè)大概印象）
保存室埋，再看看頁面办绝，好看很多了有沒有
現(xiàn)在我們把里面亂七八糟的東西干掉伊约，只留兩個(gè)輸入框姚淆，一個(gè)按鈕
再看看頁面，有點(diǎn)形狀了屡律！
試試在用戶名這里輸入點(diǎn)東西看看腌逢，發(fā)現(xiàn)密碼框的內(nèi)容也會(huì)自動(dòng)同步
這是因?yàn)槊艽a輸入框的v-model和用戶名的一樣，綁定了相同的數(shù)據(jù)源超埋。
試試把這個(gè)v-model刪掉看看搏讶，發(fā)現(xiàn)密碼輸入框都不能輸入了！
我們把數(shù)據(jù)源定義這里改一下霍殴，增加password媒惕，不要的都干掉，像這樣
同時(shí)来庭，密碼輸入框的v-model改成form.password
再看看頁面妒蔚，可以愉快的輸入了
但是這個(gè)密碼，有點(diǎn)尷尬，沒有顯示成星號(hào)肴盏，問題不大科盛，把type設(shè)置成password就好了
這里我還加了個(gè)show-password，這樣最右側(cè)會(huì)出來一個(gè)小圖標(biāo)菜皂，可以顯示和隱藏密碼贞绵，看起來很專業(yè)！
現(xiàn)在還有個(gè)小問題恍飘，就是我們的表單擠在左上角榨崩，有點(diǎn)難看。一般來說都是居中的
我們來調(diào)下樣式表章母，設(shè)置表單的位置蜡饵，像這樣。（position這個(gè)樣式建議仔細(xì)看看教程）
再看下頁面胳施，貌似劇中了溯祸，其實(shí)有點(diǎn)歪，表單的左上角這個(gè)點(diǎn)是居中的舞肆，整體偏右下
現(xiàn)在我們用外邊距margin焦辅，把這個(gè)偏移量校正
注意這個(gè)寫法，偏移量是表單尺寸的一半椿胯。不管屏幕尺寸怎么調(diào)整筷登，都是可以正好居中的。
太棒了哩盲！ 可以自動(dòng)居中前方，還能自適應(yīng)屏幕尺寸，很不錯(cuò)廉油。
再觀察下我們這個(gè)頁面惠险，大面積慘白的背景，顯得有點(diǎn)單調(diào)抒线，試著加個(gè)背景色看看班巩。
我們先在表單元素的最外面，加一個(gè)div嘶炭，然后把這個(gè)div設(shè)置成全屏幕那么大抱慌，再加上背景樣式就好了
樣式如下
觀察下效果，比之前還難看了眨猎！表單內(nèi)容看不清了抑进， 而且左側(cè)和頭上都有漏風(fēng)
先解決漏風(fēng)的問題，在.bgDiv里面加上?left:0px;top:0px; 把這個(gè)div對(duì)齊到最角上睡陪，問題解決寺渗。
再解決表單難看的問題夕凝，現(xiàn)在表單是繼承了.bgDiv的背景色，我們給他也加一個(gè)不一樣的背景
效果如下户秤，有點(diǎn)難看码秉！
繼續(xù)調(diào)樣式，加上內(nèi)邊距padding鸡号，把表單里的子元素转砖，和表單邊框分開點(diǎn)
再看看，舒服多了鲸伴，但是我們這個(gè)表單府蔗，像一張紙漂在上面，沒有質(zhì)感
現(xiàn)在我們給表單加個(gè)邊框汞窗，顯得厚重一點(diǎn)
再觀察下姓赤，有點(diǎn)進(jìn)步了
我們?cè)俳o邊框加個(gè)陰影，加強(qiáng)立體感
有點(diǎn)立體感了
現(xiàn)在系統(tǒng)沒有名字仲吏，我們給加個(gè)標(biāo)題
樣式不能少
看看現(xiàn)在的效果不铆，label和標(biāo)題不對(duì)齊，有點(diǎn)難看
把label改成placeholder,代碼如下
頁面效果
現(xiàn)在登錄按鈕顯得有點(diǎn)可憐裹唆，用樣式把寬度設(shè)成100%
看看效果誓斥，整齊了
再優(yōu)化一下，給兩個(gè)輸入框加上圖標(biāo)（參考element文檔：https://element.eleme.cn/#/zh-CN/component/icon）
再瞅瞅许帐，圖標(biāo)有了劳坑。但是這個(gè)大片藍(lán)色的背景，還是丑成畦，很單調(diào)
我們把這個(gè)背景改成漸變色試試（漸變色除了線性的距芬，還可以設(shè)置徑向，可以自己看教程試試效果）
再看效果循帐，感覺舒服太多了框仔！ 徹底擺脫了丑陋
更多的時(shí)候，我們是放一張背景圖惧浴，我們?cè)囈幌?/p>
先找一張圖片放到這里
然后在背景的div上加:style="{backgroundImage:'url('+require('@/assets/bg.jpg')+')'}"
這里是動(dòng)態(tài)加載的圖片存和，不用require直接在css里面寫路徑是不行的（也可能有好辦法我沒找到）
樣式里面，設(shè)置圖片不重復(fù)衷旅，完全覆蓋
看看效果，還不錯(cuò)纵朋，科技風(fēng)柿顶。
背景圖也可以弄一個(gè)很小的圖片，設(shè)置成repeat操软，這樣可以省流量嘁锯，多大屏幕都不會(huì)模糊。自己可以體驗(yàn)下
現(xiàn)在我們把多語言加進(jìn)去，沒這個(gè)顯得不太專業(yè) （LangSelect.vue是之前做的模塊家乘，正好用上）
設(shè)置下樣式蝗羊，把這個(gè)下拉框擺到右邊，和輸入框右對(duì)齊
看看樣子仁锯，很不錯(cuò)
不過我們現(xiàn)在頁面上的字符串都是寫死的中文耀找，下拉框點(diǎn)了沒起作用
改成多語言的寫法，資源文件里別忘了 （參考下第4章）
再看看业崖，多語言有了野芒，高大上！
如果是面向互聯(lián)網(wǎng)的系統(tǒng)双炕，一般都會(huì)有忘記密碼和新用戶注冊(cè)的功能狞悲，我們給他加上
弄兩個(gè)文字按鈕，放到登錄按鈕下面妇斤，靠右就行了
（之前設(shè)置的窗口高度有點(diǎn)大摇锋，從300px調(diào)整到240了）
寫樣式的時(shí)候，代碼放置的順序站超，最好和元素在頁面上的順序一致乱投。
因?yàn)闃邮綍?huì)越來越多，亂放的話自己找起來麻煩
看一下顷编，是不是像一個(gè)能交差的作品了戚炫？
外觀上看是不差了，但是有個(gè)大問題媳纬，就是沒有任何功能双肤！ 點(diǎn)了登錄按鈕啥也不能干。
不過钮惠，貼圖貼的有點(diǎn)累了茅糜，要休息下，剩下的事情只能第10章來解決了素挽，本章完蔑赘。
