基于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
将需要的组件复制过来进行修改
注：多看每个组件下方的参数配置及方法
因为大部分功能基础框架都为我们封装好了，所以现在我们已经可以简单的编写我们需要的页面了
————————————————
版权声明：本文为CSDN博主「蓝格子.」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_35168861/article/details/108390868