1. Mock.js
前后端分離開發開發過程當中，經常會遇到以下幾個尷尬的場景：
1. 老大，接口文檔還沒輸出，我的好多活干不下去啊！
2. 后端小哥，接口寫好了沒，我要測試啊！
前后端分離之后，前端迫切需要一種機制，不再需要依賴后端接口開發，而今天的主角mockjs就可以做到這一點
Mock.js是一個模擬數據的生成器，用來幫助前端調試開發、進行前后端的原型分離以及用來提高自動化測試效率。
眾所周知Mock.js因為兩個重要的特性風靡前端:
數據類型豐富
支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
攔截Ajax請求
不需要修改既有代碼，就可以攔截Ajax請求，返回模擬的響應數據。
更多內容，可以雲Mockjs官方查看“http://mockjs.com/”
注1：easy-mock，一個在線模擬后台的數據平台
2. Mock.js使用步驟
2.1 安裝mockjs依賴
npm install mockjs -D #只在開發環境使用
2.2 引入
為了只在開發環境使用mock，而打包到生產環境時自動不使用mock，我們可以在env中做一個配置
(1)dev.env
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
MOCK: 'true'
})
(2)prod.env
module.exports = {
NODE_ENV: '"production"',
MOCK: 'false'
}
(3)main.js
//開發環境下才會引入mockjs
process.env.MOCK && require('@/mock')
2.3 目錄和文件創建
在src目錄下創建mock目錄，定義mock主文件index.js，並在該文件中定義攔截路由配置，
/src/mock/index.js
導入公共模塊及mockjs全局設置
import Mock from 'mockjs' //引入mockjs，npm已安裝
import action from '@/api/action' //引入封裝的請求地址
//全局設置：設置所有ajax請求的超時時間，模擬網絡傳輸耗時
Mock.setup({
// timeout: 400 //延時400s請求到數據
timeout: 200 - 400 //延時200-400s請求到數據
})
2.4 為每個*.vue定義單獨的xxx-mock.js文件
/src/mock/json/login-mock.js
注1：可以添加自定義的json數據
注2：還可以通過mockjs的模板生成隨機數據
2.5 在index.js中導入xxx-mock.js，並添加攔截路由配置
import loginInfo from '@/mock/json/login-mock.js'
Mock.mock(url, "post", {...})
看頁面打印結果
4. 后台首頁AppMain.vue的創建
4.1 Container布局容器
4.2 TopNav
注1：使用組件之間通信，完成左側菜單折疊
4.3 LeftAside
導入相應的vue和img
5. vue組件之間傳遞數據（總線）
根據vue組件之間傳遞數據實現element-ui的NavMenu菜單折疊、展開效果。
5.1 子組件往父組件傳遞數據(this.$emit)
TopNav -> Main
5.2 父組件往子組件傳遞數據(props)
Main -> LeftAside
效果圖
