1、目錄結構
2、知識點
① import Vue form ‘vue’
啥意思？怎麼引入的？
很多js介面都有這段程式碼，能不能全域性引入？
②import * as filters from ‘./filters’
按 es6 的規範 import * as obj from “xxx” 會將 “xxx” 中所有 export 匯出的內容組合成一個物件返回。
③Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
遍歷filters物件，類似於for in 組成filter
④render:h=>h(App)

以下開始研究登入頁面，其他情況類似~ /login/index.vue
一、contst（常量）、var(變數)、let（作用於當前程式碼範圍內的變數）
使用var宣告的變數，其作用域為該語句所在的函式內，且存在變數提升現象；

var i=0;
add:function()
{
	//i此時變成2；正確
	i=i+2;
}

使用let宣告的變數，其作用域為該語句所在的程式碼塊內，不存在變數提升；

let i=0;
add:function()
{
	//錯誤
	i=i+2;	
}

使用const宣告的是不能修改conts的量，在後面出現的程式碼中不能再修改該常量的值（是指棧記憶體在的值和地址）。

add:function()
{
	const obj = {a:1}
    obj.a=2
    obj.b=2；//正確，可以新增一個新屬性

    const obj = {a:1}
    obj = {a:2}
   //錯誤，不可以修改
	
}

二、為什麼vue元件中data的是一個函式
data(){} 每個例項可以維護一份被返回物件的獨立的拷貝：
三、各種箭頭函式 參考js語法

const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
 

四、watch、$route

  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }

  }
  	首先確認 watch是一個物件，一定要當成物件來用。
  	物件就有鍵，有值。 
	鍵：就是你要監控的那個傢伙，比如說$route，這個就是要監控路由的變化。
	值可以是函式：就是當你監控的傢伙變化時，需要執行的函式
	值也可以是函式名：不過這個函式名要用單引號來包裹。 
--------------------- 
  handler：其值是一個回撥函式。即監聽到變化時應該執行的函式。

五、vue-dev-tools vue開發利器

六、 @supports css語法

@supports可以讓我們在不支援CSS3屬性的瀏覽器下配上單獨的樣式
@supports可以使用not邏輯宣告，主要作用是，在不支援新特性時，可以提供備用樣式
@supports可以使用and邏輯宣告，如果同時支援這兩個條件，那麼瀏覽器將會呼叫這部分樣式

關於登入使用者名稱密碼驗證，走了很多彎路，本來是一件很簡單的事情，結果debugger除錯到原始碼中，看不懂了。。
登入的流程是，輸入使用者名稱或者密碼的時候，blur事件是指當一個元素失去焦點的時候 blur 事件被觸發。在點選登入的時候，會驗證規則，如果規則不通過，則結果返回false，不能進入主介面。
預設程式碼中只有amdin、editor可以登入

D:\vue\vue-element-admin-master\src\views\login\index.vue
!isvalidUsername(value)

import { isvalidUsername } from '@/utils/validate'

export function isvalidUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

最近一直在忙專案，沒有時間寫部落格，但是我會一直堅持寫下去