基於vue-cli-和element-ui的開發admin（1）

//首先以下僅是記錄個人本次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，歡迎指出不足