基于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 将需要的组件复制过来进行修改 注：多看每个组件下方的参数配置及方法

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