后台管理系統項目--開始

1、首先計划好完成每個模塊的時間

　　完成頁面需要好久？--首先估計出完成頁面布局和簡單路由跳轉所需要的時間，只有先把頁面完成了才能去對接接口實現復雜邏輯。

　　對接接口需要好久？--實現頁面復雜的跳轉邏輯判斷如登錄權限、接口數據的獲取保存等操作。

　　做測試需要好久？--最后的測試肯定是要的，最好每個單元都進行一次測試，即每個功能完成就測試一次，在最后測的時候才好走通。

2、正式開始項目

　　vue-cli的安裝：在一個文件夾里安裝一次即可，之后在該文件夾下直接使用vue命令即可；

　　webpack初始化：名稱可以和已有的文件夾名一致，不會沖突（針對git的項目）；

　　安裝好需要的插件---vuex、iview、wangeditor（我用的是這個富文本編輯器）、tree-table-vue（樹狀表格）；

　　路由的配置：不在router/index.js里寫長串的路由配置，而是引入進來的，這樣就要寫路由導航守衛才能有效；

//router/index.js文件
import router from './router'//router就是自定義的路由配置文件
const router = new Router({
  routes,
  mode: 'history'
})

router.beforeEach((to,from,next) => {//路由前置導航守衛，to下一個路由，from上一個路由，next()回調執行路由跳轉；是自動讀取到router.js配置的路由的
  iView.LoadingBar.start();//依賴vue的iview-ui框架
  next();//可以指定跳到哪個路由，即通過name，如登錄后自動跳到首頁
})

router.afterEach(to => {//路由導航守衛--后置鈎子，路由跳轉完后觸發
  iView.LoadingBar.finish();
  window.scrollTo(0,0);
})

export default router

路由配置文件就是放的所有路由路徑--router/router.js；

//router/router.js文件
export default [
    {
        path:'路由路徑',
        name:'路由名',
        component:()=>import('vue文件的路徑')
    },
]

在組件里不是通過側邊欄想跳轉路由用 this.$router.push({name:''}) 來實現。

3、頁面編寫順序

① 登錄頁面，並在路由配置文件里增加路徑；

② 首頁布局，采用的是先側邊欄和右邊，右邊再分頭部和主內容；

③ 接着就按順序進行寫頁面，沒寫一個頁面，在路由里就配置路徑，現在我還是自己往側邊欄里寫內容。

 

 

　　　　術語或其他問題歡迎指教

　　　　^-^