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

//首先如下僅是記錄我的本次vue後臺管理系統的登陸界面部分操做的流程以及踩坑的注意點

1、首先是搭建vue-cli工做環境

　　這裏有兩種方式：1.用npm；（在安裝了vue，vue-cli以及webpack狀況下，cd到要工做的區域，使用命令行vue init webpack（項目名稱）而後開始搭建）；

　　　　　　　　　　2.用命令行使用vue ui進行操做，我的感受對新手比較友好，由於相對於npm方式來講，用vue ui更可視化的搭建項目，下面是vue ui進去的界面；

 　　

2、關於eslint的安裝

　　eslint這個插件呢屬實很煩，煩到有空格，有分號等都要給你報錯，可是我以爲是能夠對於本身養成良好的編程習慣，而且要習慣性的去看控制檯以及一些基本錯誤提示語句意思，才能找到錯誤所在；

3、關於插件以及依賴的安裝

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

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

　　element-ui（能夠調用一些組件的使用，這裏若是使用vue ui方式可能涉及到按需導入和全局導入，按需導入的話用哪一個組件就須要到plugins下的element.js中導入所須要的組件，而後挨個vue.use（）設置全局使用）；

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

　　

　　

4、清空全部原始界面。保留最最基本的東西，好比，app.vue中本身帶的內容（帶id的div別刪），components下面自帶的，以及views下面的about.vue和hello.vue，app.vue中導入的原始組件，這些都爲了方便本身從頭開始寫；

5、新建全局樣式。在assets下新建個css文件夾，再新建個global.css來保存整個界面樣式，讓body，html，#app能達到全屏；

　　

6、登陸頁面設置。在components下面新建一個Login.vue的登陸頁面，而後自由發揮登陸界面，涉及到須要form表單以及button的請移步至elemen-ui官網組件欄中選擇本身須要的並copy，下面是本身的部分代碼；

　　

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

　　1. :model （注意前面的冒號！我的感受這是把form當作一個對象，而後在el-form-item中調用這個對象的屬性使用v-model數據雙向綁定）（官方文檔將 el-form 的 model 屬性描述爲"表單數據對象"）；

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

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

　　

　　請結合六中的圖片參考數據

　　style板塊就本身設置啦=。=

8、爲了實現點擊頁面就進入login登陸頁面，咱們要進行路由設置

　　首先用import導入login界面；

　　而後使用Vue.use（VueRouter）全局使用；

　　接着設置主頁已經其餘對應地址；

　　

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

　　

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

　　Github：ClearLuvMoki，歡迎指出不足