承接上文： 。本文介紹如何利用Element-ui來實現登錄註冊的頁面，本文git地址：
https://gitee.com/vuejslearn/news-list.git
先來看看實際效果吧：
- 登錄頁面
登錄頁面
- 註冊頁面
註冊頁面
登錄註冊頁和導航欄聯動
上文中，我們已經把vuex持久化並且模塊化了，同時已經將Element導入到項目裡了。前期的準備工作已經完成，接下來，我們開始重構我們之前的login.vue頁面啦，實現登錄註冊頁面。
首先我們需要知道的是，登錄、註冊都是在login.vue文件裡實現，因此，我們需要定義一個屬性，用來動態的顯示。我們定義toLogin，false時表示註冊，true時表示登錄，默認是false。因此導航欄的登錄註冊連接，我們就可以這樣寫了：
Header.vue中的登錄註冊函數
登錄、註冊按鈕的點擊事件，執行上面的方法，去跳轉到登錄頁面，類型不同，頁面顯示的內容也是不同的。這樣，我們的登錄註冊頁面就和導航欄聯動起來了。
登錄註冊頁面元素
接下來，我們來實現登錄註冊頁。在這裡，我們發現，使用最多的，就是input元素，我們查看element-ui庫的input組件，發現有相關的文檔。假如我們寫一個用戶名的輸入框，並且輸入框裡帶圖標，我們該怎麼寫呢？這樣寫：
<el-input> placeholder="手機號或郵箱"
v-model="username"
prefix-icon="el-icon-user-solid"
clearable>
/<el-input>
輸入的密碼可以這麼寫：
<el-input> placeholder="請輸入密碼"
v-model="password"
type="password"
prefix-icon="el-icon-view">
/<el-input>
這樣，在頁面上，就是這麼顯示的：
ok，剩下的我們就是排版佈局了，整體的佈局採用的是flex方式，縱向排列，引用全局less變量：flex-display。
登錄註冊頁面實現代碼
我們首先將內容的基本內容搭起來，然後再修改樣式。
- 登錄頁面涉及到：用戶名、密碼、登錄按鈕。除此之外，我還增加了兩個第三方登錄：微博、微信。當然後端的功能沒有實現，感興趣的朋友可以獨立實現以下。
- 註冊頁面涉及到：暱稱、手機號、驗證碼、密碼、註冊按鈕。
按照原始類型，可分為：div、input、button、img這幾類。具體的模板代碼：
登錄模板代碼
註冊模板代碼
我們通過toLogin的真假來判斷顯示什麼內容。不同的內容傳遞了不同的數據給後臺。當用戶點擊登錄或者註冊後，會執行預先設定好的函數，去執行相應的方法。
當然，只有模板代碼是不夠的，頁面還需要進行排版佈局。完整的佈局：
<style><br> .login-backend {<br> .flex-display();<br> width: 100%;<br> height: 100%;<br> padding-top: 200px;<br> .login-wrapper {<br> width: 300px;<br> height: 350px;<br> padding: 20px 10px;<br> box-shadow: 0 0 6px rgba(0, 0, 0, .20);<br> .text-input{<br> margin-bottom: 10px;<br> }<br> .login-button{<br> margin-top: 50px;<br> width: 100%;<br> }<br> .divider{<br> .flex-display(row);<br> margin-top: 40px;<br> .line{<br> width: 50px;<br> border-top: 1px solid #878787;<br> }<br> .txt{<br> margin: 0 10px;<br> color: #878787;<br> font-size: 14px;<br> font-family: Helvetica Neue;<br> line-height: 1.5;<br> }<br> }<br> .other-account{<br> .flex-display(row);<br> .account-icon{<br> width: 60px;<br> }<br> }<br> .login-tip{<br> margin-top: 10px;<br> float: right;<br> }<br> }<br> }<br>/<style>這樣，我們的登錄註冊頁面就寫完了。如果和後端對接，我們再實現相應的校驗、執行方法。軟件開發的過程就是一個不斷迭代的過程。
原創不容易，鑑於本人水平有限，文中如有錯誤之處歡迎大家指正。以後我會持續發佈vue實戰系列的文章，喜歡的朋友歡迎關注。
閱讀更多 溫馨的醬牛肉 的文章
