基于vue-element-template项目开发总结(一)

vue-element-template是一个轻量级后台管理系统基础模板，他的爸爸是vue-element-adimin，vue-element-admin 是一个后台集成解决方案，它基于 vue 和 element。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，实际项目开发还是使用template基础模板进行开发
地址：基础模板地址:https://github.com/PanJiaChen/vue-admin-template
将模板下载下来首先npm install一下

从路由开始将起，登录后面讲权限的时候再一起说

1.路由配置及侧边栏显示

{
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: '/dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'index' }
    }]
  },
  // 管理员设置
  {
    path: '/adminSettings',
    component: Layout,
    redirect: '/adminSettings',
    children: [{
      path: '/adminSettings',
      name: 'adminSettings',
      component: () => import('@/views/AdminSettings/AdminSettings'),
      meta: { title: '管理员设置', icon: 'admin', auth: 'adminSettings' }
    }]
  },
  // 消息设置
  {
    path: '/messageSettings',
    component: Layout,
    redirect: '/messageSettings',
    meta: {
      title: '站内消息',
      icon: 'msg'
    },
    children: [{
        path: '/messageSettings',
        name: 'messageSettings',
        component: () => import('@/views/MessageSettings/MessageSettings'),
        meta: { title: '消息设置', icon: 'setmsg' }
      },
      {
        path: '/sendMessage',
        name: 'sendMessage',
        component: () => import('@/views/MessageSettings/SendMessage'),
        meta: { title: '发送消息', icon: 'sendmsg' }
      }
    ]
  },
  // 轮播图设置
  {
    path: '/bannerSettings',
    component: Layout,
    redirect: '/bannerSettings',
    children: [{
      path: '/bannerSettings',
      name: 'bannerSettings',
      component: () => import('@/views/BannerSettings/BannerSettings'),
      meta: { title: '轮播图设置', icon: 'banner' }
    }]
  },

将原基础框架中多余的路由配置删除改为自己需要的路由，

component: () =>import(’@/views/MessageSettings/SendMessage’)
为路由懒加载
icon则是设置侧边栏菜单图标的，该项目使用的是svg图


所有你需要什么图标去iconfont图标库下载即可

2.模块页面编写

接下来就是写页面，写页面是最简单的

结合element-ul，https://element.eleme.cn/#/zh-CN
将需要的组件复制过来进行修改
注：多看每个组件下方的参数配置及方法

因为大部分功能基础框架都为我们封装好了，所以现在我们已经可以简单的编写我们需要的页面了