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

vue-element-template是一个轻量级后台管理系统基础模板，他的爸爸是vue-element-adimin，vue-element-admin 是一个后台集成解决方案，它基于 vue 和 element。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，实际项目开发还是使用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， 将需要的组件复制过来进行修改 注：多看每个组件下方的参数配置及方法

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