//首先以下僅是記錄個人本次vue後臺管理系統的登入介面部分操作的流程以及踩坑的注意點

一、首先是搭建vue-cli工作環境

　　這裡有兩種方式：1.用npm；（在安裝了vue，vue-cli以及webpack情況下，cd到要工作的區域，使用命令列vue init webpack（專案名稱）然後開始搭建）；

　　　　　　　　　　2.用命令列使用vue ui進行操作，個人感覺對新手比較友好，因為相對於npm方式來說，用vue ui更視覺化的搭建專案，下面是vue ui進去的介面；

二、關於eslint的安裝

　　eslint這個外掛呢屬實很煩，煩到有空格，有分號等都要給你報錯，但是我覺得是可以對於自己養成良好的程式設計習慣，並且要習慣性的去看控制檯以及一些基本錯誤提示語句意思，才能找到錯誤所在；

三、關於外掛以及依賴的安裝

　　vue-router（路由，實現介面跳轉這個必不可少）；

　　vue-axios（資料請求的ajax庫也必不可少）；

　　element-ui（可以呼叫一些元件的使用，這裡如果使用vue ui方式可能涉及到按需匯入和全域性匯入，按需匯入的話用哪個元件就需要到plugins下的element.js中匯入所需要的元件，然後挨個vue.use（）設定全域性使用）；

　　less（可能在style樣式設定時候會用到，使用npm下載就可，npm install --save-dev less-loader less）；

四、清空所有原始介面。保留最最基本的東西，比如，app.vue中自己帶的內容（帶id的div別刪），components下面自帶的，以及views下面的about.vue和hello.vue，app.vue中匯入的原始元件，這些都為了方便自己從頭開始寫；

五、新建全域性樣式。在assets下新建個css資料夾，再新建個global.css來儲存整個介面樣式，讓body，html，#app能達到全屏；

六、登入頁面設定。在components下面新建一個Login.vue的登入頁面，然後自由發揮登入介面，涉及到需要form表單以及button的請移步至elemen-ui官網元件欄中選擇自己需要的並copy，下面是自己的部分程式碼；

七、簡單說下其中幾個重要的屬性

　　1. :model （注意前面的冒號！個人感覺這是把form當做一個物件，然後在el-form-item中呼叫這個物件的屬性使用v-model資料雙向繫結）（官方文件將 el-form 的 model 屬性描述為"表單資料物件"）；

　　2. :rules（注意前面的冒號！通過這個message和trigger：'blur'可以設定當滑鼠離開input框時候賬號密碼的長度是否正確或者有沒有輸入的提示，required: true則表示這一個輸入框是必填項）；

　　3. type="password"是為了隱藏密碼；

　　請結合六中的圖片參考資料

　　style板塊就自己設定啦=。=

八、為了實現點選頁面就進入login登入頁面，我們要進行路由設定

　　首先用import匯入login介面；

　　然後使用Vue.use（VueRouter）全域性使用；

　　接著設定主頁已經其他對應地址；

　　還要在app.vue中設定router標籤佔坑；

　　下面將會更新登入頁面的登入和重置按鈕事件跳轉以及後續頁面的設定。

　　Github：ClearLuvMoki，歡迎指出不足

&n