更新一個(gè)解決問(wèn)題的思路，作為例子，見(jiàn)文章末尾

vue-admin使用

首先，一句話：

物有本末，事有始終，追根溯源，心無(wú)旁騖。

1. 以添加頁(yè)面講解所謂物有本末

添加一個(gè)頁(yè)面，vue中是在views中創(chuàng)建，在router中注冊(cè)，即可。成功訪問(wèn)的前提是你要完成這兩個(gè)步驟。

我們習(xí)慣于先在腦海中建立一個(gè)框架，再去畫(huà)頁(yè)面，畫(huà)頁(yè)面時(shí)也是先在腦海中建立一個(gè)框架，再去添加頁(yè)面元素。這都是一個(gè)從無(wú)到有的過(guò)程。

首先，我們要知道我們要畫(huà)哪幾個(gè)頁(yè)面，其次，我們?nèi)iews中創(chuàng)建，然后，我們?cè)趓outer中注冊(cè)。

1.1 找到src下的router.js，代碼位置可參考已有頁(yè)面對(duì)應(yīng)的位置，代碼示例：

  {
    path: '/sys',
    component: Layout,
    redirect: '/sys/user', //如果用戶地址欄輸入地址/sys則重定向到/sys/user
    alwaysShow: true, 
    meta: {
      title: '系統(tǒng)設(shè)置',
      icon: 'setting',
      roles: ['admin', 'editor'] 
    },
    children: [
      {
        path: '/sys/user',
        component: () => import('@/views/sys/user/index.vue'),
        name: 'sysUser',
        meta: {
          title: '用戶管理',
          icon: 'user',
          roles: ['admin'] 
        }
      },
      {
        path: '/sys/dept',
        component: () => import('@/views/sys/dept/index.vue'),
        name: 'sysDept',
        meta: {
          icon: 'dept',
          title: '部門(mén)管理'
          
        }
      },
      {
        path: '/sys/role',
        component: () => import('@/views/sys/role/index.vue'),
        name: 'sysRole',
        meta: {
          icon: 'role',
          title: '角色管理'
          
        }
      }
    ]
  },

路由配置項(xiàng)如下：

{
  path: '/permission',
  component: Layout,
  redirect: '/permission/index', //重定向地址，在面包屑中點(diǎn)擊會(huì)重定向去的地址
  hidden: true, // 不在側(cè)邊欄線上
  alwaysShow: true, //一直顯示根路由
  meta: { roles: ['admin','editor'] }, //你可以在根路由設(shè)置權(quán)限，這樣它下面所以的子路由都繼承了這個(gè)權(quán)限
  children: [{
    path: 'index',
    component: ()=>import('permission/index'),
    name: 'permission',
    meta: {
      title: 'permission',
      icon: 'lock', //圖標(biāo)
      role: ['admin','editor'], //或者你可以給每一個(gè)子路由設(shè)置自己的權(quán)限
      noCache: true // 不會(huì)被 <keep-alive> 緩存
    }
  }]
}

1.2 新建你所添加的頁(yè)面在相應(yīng)的位置

如上示例，你需要在views中新建sys/role/index.vue、sys/dept/index.vue、sys/user/index.vue三個(gè)vue文件，并寫(xiě)入相關(guān)內(nèi)容即可。

2. 以書(shū)寫(xiě)api來(lái)講解所謂追根溯源

我們開(kāi)發(fā)是使用前后端分離的方式，所以前端需要調(diào)用后端的接口來(lái)完成通信。

書(shū)寫(xiě)api很簡(jiǎn)單，發(fā)起ajax請(qǐng)求，傳過(guò)去參數(shù)，接收到請(qǐng)求，這就完成了一次通信。

vue-admin中已經(jīng)封裝好了axios在src/utils/request.js中，我們直接使用即可。

2.1 找到src下的api文件夾

創(chuàng)建一個(gè)js文件，如下示例：

//login.js
import request from '@/utils/request' //引入封裝好的axios請(qǐng)求

export function loginByUsername(username, password) {
  const data = {
    username,
    password
  }
  return request({
    url: '/login/login',
    method: 'post',
    data
  })
}

export function logout() {
  return request({
    url: '/login/logout',
    method: 'post'
  })
}

export function getUserInfo(token) {
  return request({
    url: '/sys/user/info',
    method: 'get',
    params: { token }
  })
}

export出去一個(gè)方法即可，方法內(nèi)容參考上述示例

幾個(gè)重點(diǎn)

• request.js中有一個(gè)baseURL設(shè)置的是全局的接口前綴，你不需要設(shè)置它，你只需要在config文件夾中的dev.env.js文件和其他幾個(gè)js文件中，設(shè)置

BASE_API: '"http://yapi.hzhengji.cn/mock/31/"' //使用對(duì)應(yīng)的mock接口地址

• 登錄時(shí)出現(xiàn)的問(wèn)題匯總：

  • 登錄失?。嚎赡苁墙涌诘刂凡徽_，或者是前綴不正確。首先，去查看BASE_API是否設(shè)置正確，其次，去查看接口文件（如上例login.js）的url是否設(shè)置正確，最后，查看參數(shù)字段是否正確。

  • 獲取用戶信息失敗：如果上述的幾個(gè)過(guò)程都排查過(guò)了，卻仍然登錄不成功，比如報(bào)錯(cuò)roles must be a non-null array，那是因?yàn)楂@取用戶信息失敗。 在src文件夾下，有一個(gè)permission.js文件，里面有個(gè)router.beforeEach鉤子，其中設(shè)置了每次頁(yè)面跳轉(zhuǎn)之前調(diào)用判斷用戶信息，里面調(diào)用了一個(gè)action，GetUserInfo。在GetUserInfo中設(shè)置了如果沒(méi)有權(quán)限，則報(bào)錯(cuò)。

    解決辦法：mock一個(gè)接口來(lái)獲取用戶信息的，具體接口內(nèi)容，參考以往項(xiàng)目的/user/info接口。

3. 持續(xù)交付，切勿過(guò)多地停留

剛才講個(gè)兩個(gè)案例，分別舉例說(shuō)明如何開(kāi)展工作以及可能遇到的問(wèn)題。這些問(wèn)題比較常見(jiàn)，當(dāng)然還有很多不可預(yù)見(jiàn)的問(wèn)題，接下來(lái)講我們會(huì)講如何定位問(wèn)題和如何解決

首先，如何開(kāi)展工作：

• 抓重點(diǎn)，略過(guò)無(wú)關(guān)緊要的東西，不要關(guān)心具體的細(xì)節(jié)的東西，先把握全局，知道每個(gè)部分如何協(xié)同工作的。像帶兵打仗一樣，不需要知道每個(gè)士兵的能力，只需要知道這個(gè)營(yíng)這個(gè)團(tuán)的能力。

• 追溯源頭，先想要做什么，再想實(shí)現(xiàn)的路線，然后去實(shí)現(xiàn)。

• 最后學(xué)會(huì)問(wèn)問(wèn)題。

3.1 抓重點(diǎn)

看一個(gè)框架先看整體的結(jié)構(gòu)和思路，然后逐步拆解消化。當(dāng)然這個(gè)拆解消化的過(guò)程是你逐步完善一個(gè)項(xiàng)目的過(guò)程，而不是你先學(xué)會(huì)所有的，再去完善一個(gè)項(xiàng)目。

也就是說(shuō)，從實(shí)戰(zhàn)中去學(xué)習(xí)體會(huì)這個(gè)框架的一些思路。

很簡(jiǎn)單的一個(gè)例子，即使你不知道x+y=z，你也可以寫(xiě)出來(lái)x+y+x+y=z+z。模仿是我們的天性，你可以不知道axios的封裝內(nèi)容，但是你可以根據(jù)別人寫(xiě)過(guò)的如何調(diào)用后臺(tái)api接口的方法去寫(xiě)你自己的api方法。

3.2 追溯源頭

學(xué)會(huì)追溯源頭而不是一籌莫展。

舉個(gè)實(shí)戰(zhàn)中的例子：實(shí)現(xiàn)登錄功能（具體的原理思路手摸手已經(jīng)講得很清楚https://juejin.im/post/59097cd7a22b9d0065fb61d2，這里不再累述，只講如何實(shí)現(xiàn)。）

你下載了vue-admin，要把接口改成我們自己mock的，于是你需要（上面有過(guò)介紹，再來(lái)過(guò)一遍流程）：

（1）找到BASE_API，改為我們自己的mock地址。

（2）找到login.js，把login的url改為自己項(xiàng)目的，把getuserinfo也改成自己項(xiàng)目的。

那么要說(shuō)一下怎么知道是這兩個(gè)文件的。我們要改登錄的接口，就要先看登錄的邏輯，找到登錄的頁(yè)面。

（1）找到登錄頁(yè)面：如何找，如果這個(gè)項(xiàng)目比較大，不容易找，那么按照下面的步驟。

首先，啟動(dòng)項(xiàng)目，找到項(xiàng)目url，（http://localhost:9527/#/login?redirect=%2Fdashboard），發(fā)現(xiàn)路 徑是login。

其次，去router中搜索這個(gè)path，發(fā)現(xiàn)component: () => import('@/views/login/index')

最后，找到login文件夾下的index。

（2）打開(kāi)登錄頁(yè)面，找到登錄的方法，handleLogin，查看一下邏輯。

首先，驗(yàn)證登錄表單，如果驗(yàn)證不通過(guò)，則console.log('error submit!!')?？梢缘弥绻憧刂婆_(tái)打印的是error submit，那么問(wèn)題就知道處在哪了。

其次，驗(yàn)證通過(guò)后，調(diào)用this.$store.dispatch('LoginByUsername', this.loginForm)，這是一個(gè)vuex的action，如果你不知道，沒(méi)關(guān)系，接著向下找。進(jìn)入store的modules文件夾中，找到user.js，打開(kāi)。全局搜索一下LoginByUsername，發(fā)現(xiàn)在一個(gè)action里面，這就是登錄頁(yè)面的登錄按鈕所執(zhí)行的方法。

然后，我們看一下LoginByUsername，邏輯大致是LoginByUsername這個(gè)action調(diào)用LoginByUsername這個(gè)同名的api（這個(gè)api是在最上面引入的import { loginByUsername, logout, getUserInfo } from '@/api/login'），傳給服務(wù)器賬號(hào)密碼，服務(wù)器驗(yàn)證后傳過(guò)來(lái)token，然后把token存入vuex的state和cookie中。至此，登錄就完成了。

（3）什么？有問(wèn)題，看看控制臺(tái)是否報(bào)接口地址的錯(cuò)誤，如果是，看看你的BASE_API是否和控制臺(tái)打印的錯(cuò)誤一致。接口沒(méi)問(wèn)題卻還是沒(méi)有跳轉(zhuǎn)？報(bào)的錯(cuò)是roles must be a non-null array， 那就可能是前面說(shuō)過(guò)的問(wèn)題：在src文件夾下，有一個(gè)permission.js文件，里面的router.beforeEach的問(wèn)題

經(jīng)過(guò)如上的修改之后，你的登錄功能應(yīng)該就ok了，其他不可預(yù)見(jiàn)的問(wèn)題自行排查。

3.3 學(xué)會(huì)問(wèn)問(wèn)題。

去問(wèn)問(wèn)題之前：

（1）明白你想問(wèn)什么

（2）已經(jīng)試過(guò)解決但沒(méi)見(jiàn)成效

（3）話不在多

（4）去除無(wú)意義的提問(wèn)

其次，定位問(wèn)題和如何解決：

分享幾個(gè)比較實(shí)用的技巧或者說(shuō)是經(jīng)驗(yàn)。

• 照葫蘆畫(huà)瓢頁(yè)面也沒(méi)有出現(xiàn)預(yù)期的效果

  這時(shí)，你需要從幾個(gè)方面來(lái)排查

  • 是否報(bào)錯(cuò)，報(bào)的錯(cuò)是什么，能否在百度的第一頁(yè)找到。

    首先，如果沒(méi)有報(bào)錯(cuò)，很大可能是因?yàn)槟愕钠安皇潜戎?huà)的，而是裝逼閉著眼睛畫(huà)的。

    其次，如果報(bào)的錯(cuò)在控制臺(tái)顯示，嘗試根據(jù)提示信息去排查。排查的方法有兩種，一是報(bào)的文件錯(cuò)誤，vue甚至都提示了你哪一行或者是哪個(gè)方法錯(cuò)了，一看就是你的語(yǔ)法或者是用法錯(cuò)誤；二是vue報(bào)的錯(cuò)誤 一般可以通過(guò)百度解決。這些一般也是比較容易解決的。如果報(bào)的錯(cuò)是彈窗提示的錯(cuò)誤，這一般是框架里面某個(gè)地方設(shè)置的提示錯(cuò)誤，你可以根據(jù)提示信息進(jìn)去全局搜索，找到是哪個(gè)地方因?yàn)槭裁催壿嫴艜?huì)報(bào)的錯(cuò)，定位問(wèn)題從而解決。

    最后，絕大多數(shù)你遇到的問(wèn)題其實(shí)都可以在百度找到，關(guān)鍵在于你的百度方法是否正確。

    如果這些步驟你都沒(méi)有經(jīng)歷過(guò)，就坐在那里一籌莫展，控制臺(tái)的問(wèn)題就是小事了，你的問(wèn)題才是大事。

• 自己嘗試添加一些新的功能

  如果沒(méi)有出現(xiàn)預(yù)期的效果，那么問(wèn)題很有可能是你的打開(kāi)方式不對(duì)。是否按照官方的指南走的，是否自以為是自己加了一些不必要的代碼（很多時(shí)候問(wèn)題解決完總有人會(huì)說(shuō)我以為這樣可以）。

• 定位問(wèn)題的關(guān)鍵在于不被其他東西干擾

  你要知道自己將要解決的問(wèn)題是什么，而不是過(guò)分關(guān)心一些不相干的東西，比如你要注冊(cè)一個(gè)路由，那么你就不要發(fā)愁axios是怎么封裝的，自己完全不懂。這完全沒(méi)有關(guān)系好嗎，你不懂的東西不多了去了你還不懂cpu怎么造的呢你玩什么電腦啊。

  明確自己的問(wèn)題，順著邏輯一步步走，就像剛才梳理登錄的過(guò)程找到登錄的api一樣。

示例

問(wèn)題：動(dòng)態(tài)側(cè)邊欄的如何寫(xiě)

1、側(cè)邊欄在哪里配置
2、動(dòng)態(tài)
第一個(gè)問(wèn)題：查看頁(yè)面元素，找到側(cè)邊欄的class（element這里是el-scrollbar），
在項(xiàng)目里全局搜一下，找到這個(gè)所在地方（src\layout\components\Sidebar\index.vue），
可以看出來(lái)這個(gè)側(cè)邊欄是如何生成的了。（剩下的大家看吧）
第二個(gè)問(wèn)題：如何動(dòng)態(tài)？
1、服務(wù)器根據(jù)你登錄成功后的身份自動(dòng)生成一個(gè)router列表返回給你，你直接拿到增加到你的router（可以通過(guò)addRoutes）
2、服務(wù)器只返回給你身份，你來(lái)生成router列表，最后增加到你的router（通過(guò)addRoutes）【這個(gè)可以參考src\permission.js】
以上基于vue-element-admin-master。
自己搭的管理端框架或者是其他的管理端框架（例如iview-admin）基本大同小異，思路一樣