vue3_硅谷甑选项目: 本仓库存放硅谷甑选项目的源代码，供练习使用

5.7 今日完成任务
- 1. 项目的初始化
  - 使用pnpm create vite 创建
- 1. eslinet的使用对项目进行代码校验的配置（*）
- 1. prettier 代码格式化的配置（*）
- 1. styleLint 的配置（*）
- 1. husky 代码提交git时的检验操作，配置后提交代码会触发git look生命周期函数，配合我们之前使用的prettier进行格式化（*）
- 1. 配置commitlint 在git提交时需要满足的规则如添加新特性feat 修改文档doc等等
- 1. 强制使用pnpm包管理器好处是统一管理，避免下载同一个依赖版本不一致
- 1. 本项目集成element-plus作为组件库（*）
- 1. src别名的使用 ‘@’的配置
- 1. 环境变量的配置开发测试生产配置每种环境所需的常量
- 1. svg图标的使用 svg比image体积小，资源消耗小并将其配置为全局组件
- 1. 集成sass
- 1. 使用mock制造我们的假接口和假数据，方便测试
- 1. axios的二次封装主要是使用请求和响应拦截器，方便对数据，网络请求进行处理（*）
- 1. api接口的统一管理（*）
5.8 今日完成任务
- 1.项目初始路由的配置
  - 包括首页、登录页、404页、任意页面
- 2.登录页静态的实现
- 3.登录接口的设计、封装登录业务
  - 将登陆状态保存在仓库中，在仓库中进行登录状态的判断
  - 登录仓库数据类型的ts校验
5.10 今日完成任务
- 1. 实现一个登陆时间的判断利用内置函数date来获取
- 1. 表单的校验规则
  - 初级：验证输入的字符长度是否合规，否则不发送网络请求此步可以利用组件自身提供的函数解决
- 1. layout组件的封装在外层使用layout组件，便于管理
- 1. layout组件左侧菜单栏logo的封装
  - 可以封装一个文件来管理logo的显隐、标题和图标
- 1. 左侧菜单栏路由的静态书写
5.11 今日完成任务
- 1. 递归组件动态生成左侧菜单栏
- 1. 项目所需全部路由的配置
5.12 今日完成任务
- 1. 顶部导航栏的静态搭建
- 1. 左侧菜单栏的折叠
- 1. 顶部导航栏面包屑的动态渲染
  - 面包屑也带to属性，与router的to属性一致（*）
- 1. 页面刷新业务的实现
  - 实质就是点击刷新，让组件销毁重建，重建时使用nextTick函数判断dom节点是否重新渲染完毕
- 1. 全屏模式业务的实现
  - 调用DOM对象的 document.fullscreenElement来判断是否处于全屏状态
  - 使用Element.requestFullscreen()来进入全屏模式
  - 使用document.exitFullscreen()来退出全屏模式
- 1. 退出登录业务的简单实现
5.13 今日完成任务
- 1. 路由跳转进度条显示使用nprogress插件，需要引入样式
  - 安装 nprogress
  - import nprogress from 'nprogress';
  - import 'nprogress/nprogress.css';
- 1. 路由鉴权
  - 也就是路由进行跳转时，需要判断是否能跳转，比如，未登录的话需要先进行登录，登陆后除非退出登录，否则不能跳转到登录页面
  - 路由鉴权使用路由全局守卫，通过路由跳转时是否携带token来判断是否处于登陆状态
  - 路由跳转时可以判断是否需要用户信息，在跳转时如果没有用户信息，先获取用户信息在进行跳转，这样做的意义是，当用户信息中携带的token过期时，需要重新登录获取新的token
- 1. 真实服务器替代mock接口
  - 需要代理跨域，将所需要的接口地址进行替换，使用的方法返回的数据进行重新解析
5.15 今日完成任务
- 1. 商品管理中品牌管理的搭建
- 1. 商品管理的增删改查
5.16 今日完成任务
- 1. 属性管理页面的静态搭建
- 1. 属性管理页面分类请求的数据获取
5.17 今日完成任务
- 1. 属性管理页面数据的展示收集
- 1. 三级分类数据的展示收集
- 1. 三级分类数据ts的定义
5.18 今日完成任务
- 1. 属性管理模块的增删改查完成
  - 遇到的细节问题
    - 添加按钮默认为禁用状态，只有当三级分类有值之后，改为可点击状态为了避免麻烦的组件间通信，将数据存入仓库中
    - 添加按钮点击之后，进行场景的切换，设置一个变量来判断当前显示那个场景，点击按妞之后改变变量的值即可
    - 添加属性值和保存按钮默认也为禁用状态，只有添加的属性存在时，为可点击状态
    - 属性值添加之后，表格中显示文本框，默认为聚焦状态，失去焦点后变为文本状态，涉及查看和编辑状态的切换
    - 添加属性值后，属性不可为空、不可重复，否则将当前的文本框删除，涉及非法情况的判断
    - 编辑按钮点击之后，切换场景，将收集到数据的值显示在文本框中，涉及深拷贝及浅拷贝问题
5.20 今日完成任务
- 1. spu 模块的静态搭建
- 1. spu模块的场景切换
- 1. spu模块的分类请求数据获取
5.21 今日完成任务
- 1. 获取所有spu数据
- 1. 添加与修改spu接口与ts数据类型的定义
- 1. 展示已有销售属性与属性值
- 1. 照片墙数据的展示与收集
- 1. 完成新增销售属性
- 1. 展示与收集已有spu数据
5.22 今日完成任务
- 1. 完成更新spu业务
- 1. 完成添加spu业务
- 1. SKU的静态搭建
- 1. 添加SKU数据
- 1. 新增SKU数据
- 1. SKU数据列表的展示
- 1. SPU数据的删除
- 1. SKU模块的静态搭建
- 1. SKU数据的展示
- 1. SKU商品的上架与下架
- 1. SKU商品详情的静态搭建
- 1. SKU模块的增删改查
5.24 今日完成任务
- 1. 用户管理模块的静态搭建
- 1. 用户管理模块的数据显示
- 1. 用户管理模块的添加用户
- 1. 用户管理模块的编辑用户看是否存在id，存在即为更新，否则为添加
- 1. 分配角色模块的增删改查，静态搭建，数据获取
- 1. 角色管理模块的静态搭建、数据获取、关键字搜索
5.25 今日完成任务
- 1. 添加角色模块的静态搭建、数据获取、添加与更新
- 1. 分配角色模块的业务实现
- 1. 菜单管理模块的业务实现、增删改查
- 1. 主题暗黑模式的切换
- 1. 数据大屏的展示
  - 1. 顶部数据战术
  - 1. 左侧数据展示
5.26 今日完成任务
- 1. 数据大屏完成
- 1. 路由的拆分菜单权限的划分

wgs/vue3_硅谷甑选项目

简介

发行版

贡献者

近期动态

wgs/vue3_硅谷甑选项目 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

wgs/vue3_硅谷甑选项目