vue项目-后台管理系统

前言：
一个传唱度极高的前端项目，及其适合像博主这样的小白练手。特以此文章记录下项目基本的创作思路，并且文末附赠项目源码，思维导图及一些后台文件，有兴趣可自取。希望对朋友们有用。
结构：
一，登录页
二，主页面
1，用户管理
用户列表
2，权限管理
角色列表
权限列表
3，商品管理
商品列表
分类参数
商品分类
4，订单管理
订单列表
5，数据统计
组件库：
elementUi , Nprogress ， vue-echarts ， vue-quill-editor
登录页
Token验证:保存登录返回得的token值，设置请求拦截器，后续每次请求都携带token进行验证。

axios.interceptors.request.use((config)=>{//在请求头中使用 Authorization 字段提供 token 令牌
  config.headers['authorization']= sessionStorage.getItem('Token')return config
})

主页
头部，是小标题+登出按钮。点击登出时，路由会push到登录页并移除token

window.sessionStorage.removeItem('Token')this.$router.push('/')

侧边栏，定义了一个循环组件作为导航栏

<template>//引入fragment作为根节点，template作为根节点时不能循环//不使用div的原因，会影响menu组件原来的样式<fragment><template v-for="item in menuList"><el-submenu
                :index="'/' + item.path":key="item.id"//以数组元素是否有children属性为判断条件//循环编列组件，生成次级导航
                v-if="item.children && item.children.length > 0"><template slot="title"><i class="el-icon-menu"></i><span>{{ item.authName }}</span></template><menu-tree :menuList="item.children"></menu-tree></el-submenu><el-menu-item v-else:key="item.id":index="'/' + item.path">{{
                item.authName
            }}</el-menu-item></template></fragment></template>

内容区，设置路由视图，通过点击导航栏切换不同组件

用户列表页面
1，配置好基本布局和样式
2，实现各组件的功能
用户列表使用element的table组件展示，其data双向绑定后台返回的用户数据，因此只要用户数据发生变化视图就会改变。在列表组件create阶段发起用户数据请求，渲染一个基础视图。后续如分页组件数据，搜索组件发起的请求成功后，及时更新table绑定的data。
添加用户按钮绑定一个dialog组件，dialog组件中包含form表单，用来填写添加的用户的相关信息。
添加用户和搜索用户成功后，调用用户请求方法，更新data来重新渲染视图。

其余某些页面视图

基本思路如上，后面页面大差不差，篇幅有限就不再赘述了。组件的使用大家可以自行官网查看。有疑问的话建议直接翻查官方文档，相信自己，大多数问题其实自己都可以解决的。
PS：最好是创建cli3的项目，后面优化的操作会比较简单。
项目自取
资源下载