后台管理系统项目--开始

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、页面编写顺序

① 登录页面，并在路由配置文件里增加路径；

② 首页布局，采用的是先侧边栏和右边，右边再分头部和主内容；

扫描二维码关注公众号，回复： 5359066 查看本文章

③ 接着就按顺序进行写页面，没写一个页面，在路由里就配置路径，现在我还是自己往侧边栏里写内容。

　　　　术语或其他问题欢迎指教

　　　　^-^