前期准备：创建vue脚手架，配置文件，下载第三方ui库、axios、each等
技术栈：Vue、elementui-plus、axios、each
项目组合：项目主要由: 登录模块，用户管理模块、权限管理、角色列表、商品管理、订单列表、可视化图标 each 数据统计、等几个模块。
在项目启动前，先配置封装一下baseurl基地址接口路径，设置一下timeout超时时间，在通过axios 中的拦截器进行在网络请求和响应之后的一些操作，我们通过新建一个until文件夹，在里面新建一个request.js文件，在里面导入第三方axios，在配置基地址后通过 axios.interceptors 来设置拦截器，在请求拦截器中通过config.headers的 Authorization 配置一下请求头才能进入首页的token值，然后再响应拦截器中设置一下token值过期的处理，让用户去login页面去重新登录、再对一下常规的过期状态码进行处理和提示。
登录模块
通过创建一个login.vue组件，在里面引入element的form表单，通过这个点击登录事件，拿到这个表单中的用户名和密码，在通过引入封装的api接口进行发起网络请求，通过后台返回的状态码进行判断是否登录成功，成功的话就会返回一个token，将这个token存储到本地或者是vuex状态管理工具里面，在封装的网络请求中进行拿取这个token值放到请求头中，因为接下来的操作都需要依赖于这个token值，这样就可以不用在每次请求的时候都要写，显得冗余。
登录结构：
配置在网络请求带上token值:
菜单权限
菜单是通过登录的用户，后段返回的数据，进行使用rouer.routes动态路径的方式进行实现，是根据登录的用户不同，超级管理员会给他们一些权限，登录的时候会拿到这个这个菜单列表，在通过ui库中的menus导航来进行循环输入。
登录鉴权
登录鉴权是通过路由守卫来实现的，我使用的时候路由的前置守卫（beforeEach）来进行判断状态管理工具中或者本地中是否有token值，没有的话，就强制让他去登录界面。
用户管理模块
用户模块的表格结构通过引入ui库中的<el-table>在data中进行配置tableData属性为一个数组，在onMounted钩子函数中请求用户列表的数据，在根据打印的data的数据进行赋值给tableData表格中的状态和操作表格的按钮需要使用<template>本行数据来设置，添加事件就是点击按钮后出现一个添加用户的模态框，在里面加入用户的姓名，邮箱之类的数据，点击确定发起网络请求，后端返回状态码判断是否添加成功 重新调用获取表格的数据。
我觉得用户列表模块中相对于用户这个模块比较复杂的还是分配角色模块，它里面也就是一个下 select 拉框，v-mode绑定一个空的数据，在option中循环用户列表中拿到的数据，在属性value中进行赋值，然后再通过点击确定的事件判断他的value值，发送分配角色请求，给这个值带过去，后段返回分配成功字段。
权限管理-角色列表
角色列表中最大的难点莫过于分配权限和角色下面渲染了，这个分配权限主要还是在点击这个事件之后弹出一个模态框，里面引入一下ui库中的<el-tree>这个tree树型控件，在tree控件中绑定data数据，然后需要在tree树型控件中加入show-checkbox这个属性，因为这个树型控件默认是为false的，他的意思就是节点是否可以被选择，不加这个属性的话，使用的时候也无法被选中，在加入default-expanded-keys属性，译为选中的节点默认为展开的。因为发送树型控件的数据接口一般都是一个body体，就是个树型的数据，可以通过递归来判断里面的children是否还存在，直至判断到最后一层的id中的数据没有children的时候停止递归，在看树型控件是为全开还是半开，在vue2中可以直接使用this来拿到这个最后一层的id值，而在vue3中就不存在this指向了，就可以引入proxy，它里面可以访问到整个对象和原型，使用proxy.$refs.tree.数据数据.map来判断id是否相等，最后给它强转为字符串，在发送网络请求。改变用户的权限。
分配权限事件代码（vue3）：
商品管理-（商品列表）
商品列表里面最麻烦的也是添加商品了，他不像其他组件那样直接模态框输入，传入就能加了，它是跳转了一个页面，需要在里面填入商品信息、级联菜单、商品属性、动态参数、上传商品图片、还有商品介绍的富文本。
这个步骤条是引入ui库中的 steps 通过设置里面的title属性页面中就可以显示基本信息、添加商品的这些文字，步骤条中通过添加 active 属性，绑定的是左侧tabs切换的下标，通过点击左侧的tabs给全局的activeIndex传过去当前的下标，给activeIndex绑定到步骤条的active属性上就可以实现点击tabs，已完成的功能。在基本信息中有个级联菜单，在级联菜单的事件中判断级联选中的是第几级，选中为第三级的时候才会拿到他的 id ，给这个id拿到商品参数和商品属性中，渲染
上传图片
上传图片是通过和 element ui 库结合的upload进行上传商品图片的的，通过upload中的 action 属性 属性中放置上传的图片地址，通过 on-success 属性 上传成功后的钩子函数，调用这个函数，使图片转换成二进制，传给后台，后端会拿到这个二进制文件再进行转换，成功的话会返回给前端一个data数据，一个是临时图片路径，一个是真实图片路径，临时图片会让前端自己查看，真实路径后端会存到数据库中，返回上传成功，提示用户.
数据统计
数据统计是通过第三方的 each第三方插件，下载，全局导入，根据each的实例，赋值代码，放到data数据中，比如说使用柱状图，通过融入 option 数据，在请求接口的时候，更改option里面data相对应的数据。
数据可视化图需要放在一个盒子中，盒子需要设置宽高，或者是设置最大宽度，最大高度，不给盒子宽高的话，each图标是无法显示的。
总结：以上就是项目中所有模块的功能需求。本项目，是一个后台管理系统。采用前后端分离开发，主要用于给内部运营人员管理商 品用的。主要有登录模块、用户管理模块、权限管理模块、商品管理模块、数据统计等模块。