项目介绍： 该项目是基于vue-cli创建的一个综合性的电商购物网站，类似于淘宝，京东商城。登录后用户可以在该网站浏览商品，加入购物车，下订单以及各种各样的活动。未登录的用户可以不能进行下单，他们可以通过*号注册或者qq登录的方式进行登录完成购物。 技术栈： vue3.0（使用组合API的方式来开发），axios，vue-router（单页路由），vuex（状态管理， vuex数据持久化），@vueuse/core（组合api常用工具库）， vee-validate（表单校验） 遇到的问题： （1）后台接口请求完毕，但是数据缺乏（分类，商品），所以会有一些本地的moke数据 （2）绝大多数第三方UI组件库不支持vue3.0，大多数组件由自己封装（轮播图，复选框，对话框消息提示和消息确认组件，城市选择组件） （3）第三方登录也是有点难度 vuex-持久化： 让在vuex中存储的状态和数据存储在本地。 在开发过程中，用户的信息（名字，头像，token等）需要在vuex中存储且需要存储在本地 购物车未登录状态下也支持，管理在vuex中的数据需要存储在本地 所以，通过安装vuex插件来支持vuex的状态持久化 请求工具： 基于axios封装的请求工具，调用接口时使用 （1）创建一个新的axios实例 （2）请求拦截器：如果有token进行头部携带 （3）相应拦截器：①剥离无效数据 ②处理token失效 （4）导出一个函数，调用当前的axios实例发请求，返回一个promise 首页： （1）使用less自动化导入 使用less混入，就是声明一段css代码（选择器包裹的代码）或者函数，在其他css选择器调用，可服用包裹的代码 完成自动注入公用变量和混入遇到的问题： 每次使用公用变量和mixin的时候需要单独引入到文件中 解决方法：使用vuecli的style-resources-loader插件来完成自动注入到每个less文件或者vue组件中style标签中（安装完插件后再vue.config.js中进行配置，然后再重启服务器） 轮播图组价的封装： 暴露一个自动播放属性，通过设置一个定时器来控制自动播放，先设置默认显示图片的索引为0， const index = ref（0），自动播放根据数组，如果它的索引大于传过来数据数组的长度，则重新把索引设置为0 通过监听传过来的数据，如果有数据开启自动播放，调用自动播放的函数 指示器切换上一张下一张： 就是给指示器添加click事件然后传递参数一个是1，一个是-1分别代表前进和后退 vue动画：（Transition组件的使用） 在vue中，显示隐藏创建移除一个元素或一个组件的时候可以通过transition实现动画 进入：（显示，创建） v-enter 进入前（vue3.0是 v-enter-form） v-enter-active 进入中 v-enter-to 进入后 离开（隐藏，移除） v-leave离开前（vue3.0是 v-leave-form） v-leave-active 离开中 v-leave-to 离开后 多个transition使用不同的动画，可以添加name属性，name属性的值替换v即可 组件数据懒加载：（当前组件进入可视区再加载数据） 使用@vueuse/ core中的useIntersectionObserve函数来实现监听可视区域行为，必须配合vue3.0的组合API的方式才能实现

初始化布局 页头页脚公共组件 首页轮播图 在components 文件夹中新建所有页面统一的头部组件和页脚组件 在默认布局中 layouts/default.vue中 导入公共组件并使用 使用 Element-ui 的幻灯片组件 el-carousel,新增首页的轮播图布局 请求后端接口替换静态图片数据 首页的轮播图布局，pages/index.vue 是在 layouts/default.vue 中的 中渲染 banners 是我们自己构建的一个死数据数组, 用来遍历之后生成多张图片进行轮播

自己负责商品管理：商品分类的增删改查，品牌的增删改查及商品的增删改查功能 会员管理：商城的会员等级，优惠、积分、充值及会员的增删改查功能 订单管理：用户下单以后，订单的状态跟踪以及所有订单的统计功能 角色权限：增加新用户以后，为用户增加权限功能 报表业务：日销售报表、日新增用户报表、商品的销售报表、品牌销售报，表、分类销售报表等 库存管理：商品的库存查看以及进货单、退货单、调价单的管理 账号管理，是管理员最常用到的功能。这一模块，需要设置相应字段，对内部人员的信息进行管理，首先应该具备“新增”、“删除”、“编辑”这三项基础的操作功能。另一方面，考虑到对某项指标不合格或者行为违规的员工， 做出暂停使用账号的处理结果，因此，在上述三项基础操作功能之外，可以再增加“禁用”和“启用”的功能。 账号列表：账号列表应该优先显示重要的字段，比如ID、用户名、真实姓名、部门、角色、账号状态、注册时间等。当然，除了这些，后端还需要记录下用户的其他字段，比如最近登录时间、登录次数等等操作记录。 添加账号：当管理员点击“新增”按钮时，当前页面可以跳转到填写账号信息的页面， 也可以通过弹窗的方式出现。新增账号的字段应当尽量详细，以便将来对用户行为做统计分析。同时在这个阶段，我们可以通过判断用户的身份，来给他赋予相应的角色。在这一步，不需要配置权限，因为角色本身就是带有权限的 角色管理部分，是用来管理内部用户的角色信息。角色，是对具有共同特征的某一类人群的身份归纳，在这个模块里，我们需要设置一些字段来描述角色信息，降低学习成本，让管理员能够轻松识别角色的特质，从而为不同的用户赋予对应的角色身份。 角色列表：角色列表类似账号列表，也是将一些重要字段展示出来，让管理员能够很快的了解角色的相应信息，比如角色ID、角色名称、基本权限、操作权限等。当基本权限和操作权限非常繁杂的时候，可以只显示重要的几类，其他的详情，可以点击查看。在角色列表，只需保留“新增”和“删除”功能，“搜索”功能也可以不需要，因为角色的种类通常比较少，否则会给管理员增加负担。 新增角色：“新增角色”和“编辑角色”，都是给角色赋予相应的权限。过去我在给角色配置权限的时候，使用过下拉菜单的方式来选择。但如果碰到权限非常繁杂的情况，下拉菜单就不太适用了。这个时候，可以将权限都罗列出来，可以分组排序，也可以默认全部选中，然后让用户根据需求去勾选掉不需要的权限。 权限管理这部分，是逻辑性最强的一块，需要产品经理提前准备好一份权限清单，将权限的名称、描述、性质（基本/操作）等信息梳理清楚。 权限列表：在做权限梳理之前，产品经理一定要与开发人员沟通好，确定哪些权限是同类型的，可以归为一组，而哪些功能又必须是分开设置的。拿我之前做的这个项目为例，这个产品没有涉及工作流环节，但Boss想让不同角色的用户，看到不一样的界面，所以除了通常的操作权限划定之外，还有一些基础的菜单查看权限，也要细分。当然了，因为权限细分起来非常繁杂，所以权限列表还需要有分页的功能，也可以加上搜索功能。 新增权限：“新增权限”页面，是为开发人员设置的，开发人员可以在这里将代码内容录入。