# 云岚到家-机构端 #### 项目简介 > 当代人们的生活节奏越来越快，很多人因为工作和其他事情没有时间去处理家务事，因此需要家政服务来帮助他们解决日常生活中的问题。云岚到家家政项目是一种在线服务，将家政服务与互联网技术相结合，为用户提供更加便捷的家政服务。 项目迭代日志： 23年3月30 - 合并更新 处理无法合并问题 #### 研发规范遵循： - 主体使用驼峰命名 - 公共样式使用 - 连接命名 - 内部样式 驼峰命名 - 页面命名 使用小写开头的驼峰命名 - 组件使用大写开头命名 #### 产品原型及设计 - 设计稿： https://codesign.qq.com/app/design/P4VlZMr6dzjq6wL/board?team_id=6dqN292MdajaBXe - 产品原型： https://codesign.qq.com/app/prototype/a4Jd0NaP739AMkb/detail #### 运行环境 - 初始开发环境及工具 - 项目开发环境: win10 + node: v16.19.0 + npm: 8.12.1 || pnpm: 6.32.8 #### 访问地址 #### 技术栈应用 Vue 3 + TypeScript +Tdesign + Vite + pinia #### 项目结构 ```html ├── commitlint.config.js - commintlint 规范 ├── docker - docker 部署配置文件 │ └── nginx.conf - 若开启 browerhistroy 可参考配置 ├── docs - 项目展示图 - 首页截图 ├── globals.d.ts - 通用声明文件 ├── index.html - 主 html 文件 ├── mock - mock 目录 │ └── index.ts ├── node_modules - 项目依赖 ├── package-lock.json ├── package.json ├── public - 公用资源文件 │ └── favicon.ico ├── shims-vue.d.ts ├── src - 页面代码 │ ├── api 请求相关 │ ├── assets 公共资源 │ │ ├── images 图片资源 │ ├── api - 接口 │ ├── components - 公用组件 │ │ ├── Delete - 删除弹层：只需从父组件传删除的内容提示 │ │ ├── Confirm - 确认弹层：只需从父组件传确认的内容提示 │ │ ├── expBall - 展示版本更新内容的小球球 │ │ ├── ImageMagnify - 查看图片弹层 │ │ ├── NoData - 无数据的空页面形式 │ │ ├── product-card - 产品卡片 │ │ ├── result - 结果 │ │ ├── editDialog - 编辑弹窗 │ │ ├── thumbnail - 缩略图 │ │ ├── trend - 趋势图 │ │ ├── Message - 提示弹层 │ │ │ ├──Success - 成功通知弹窗 │ │ │ ├──ProdDisabled - 禁用提示弹窗 │ │ ├── switchBar - tab切换 │ │ │ ├──switchBar - tab切换 │ │ │ ├──switchBarindex - 首页tab切换 │ │ │ ├──switchBartop - 线条tab │ ├── czriComponents - 组件包：常用，但是原有组件库实现不了，因此进行了二次开发 │ │ ├──index.less - 组件包样式 │ ├── layouts - 页面架构 │ │ ├──components - 页面架构公共组件 │ │ │ ├──Breadcrumb - 面包屑 │ │ │ ├──Content - 内置组件，避免重复渲染DOM │ │ │ ├──Footer - 底部公司名称 │ │ │ ├──LayoutContentSide - 侧边栏 │ │ │ ├──LayoutHeader - 侧边栏头部 │ │ │ ├──Loginfo - 侧边栏退出区域 │ │ │ ├──Notice - 通知中心，弃用 │ │ │ ├──Search - 搜索功能 │ │ ├──simpleComponents - 框架公用内容 │ │ │ ├──MenuContent - 简版布局 │ │ │ ├──SideNav - 列表菜单 │ │──index.vue - 框架布局 │ │──setting.vue = 设置框架风格 │ ├── config - 项目配置 │ │ ├──configuration - 配置项目地址和api │ │ ├──global - 配重全局内容 │ │ ├──proxy.ts - 代理样式 │ │ ├──style.ts - 配置全局样式风格 │ ├── pages - 页面展示目录 │ │ ├──dashboard - 首页，工作台 │ │ ├──coupon - 优惠券管理页 │ │ │ ├──addCoupon - 新增，编辑优惠券 │ │ │ ├──index - 列表页 │ │ ├──coupon - 客户管理页 │ │ ├──default - 公共缺省页 │ │ ├──institution - 企业管理 │ │ │ ├──authentication - 企业认证管理 │ │ │ ├──information - 企业信息管理 │ │ ├──personnel - 服务人员管理 │ │ │ ├──authentication - 服务人员认证管理 │ │ │ ├──information - 服务人员信息管理 │ │ ├──order - 订单管理 │ │ │ ├──dispatchList - 派单列表（已废弃） │ │ │ ├──historyList - 历史订单列表 │ │ │ │ ├──orderDetail - 历史订单详情 │ │ │ │ ├──index - 列表页 │ │ │ ├──refundList - 退款订单列表（已废弃） │ │ │ ├──orderList - 订单列表 │ │ │ │ ├──orderDetail - 历史订单详情 │ │ │ │ ├──index - 列表页 │ │ ├──reply - 原评价页面，现修改解决方案，已废弃 │ │ ├──service - 服务管理 │ │ │ ├──serviceType - 服务类型管理 │ │ │ ├──service - 服务项管理 │ │ │ │ ├──index - 服务项列表 │ │ │ │ ├──addService - 新增，编辑服务项 │ │ │ ├──region - 区域管理 │ │ │ │ ├──editRegion - 设置服务 │ │ │ │ ├──index - 区域列表 │ │ │ │ ├──setBusiness - 调度配置 │ │ ├──login - 登录页 │ │ ├──user - 个人中心 │ ├── router - 定义路由页面 │ ├── style - 样式 │ │ ├──componentsReast - 组件重置、全局样式 │ │ ├──theme - 全局颜色值、公用样式 │ │ index.less - 样式总入口 │ │ normal.less - 普通框架样式 │ │ noSecondMenu.less - 普通框架简化版样式 │ │ top.less - 上左右布局 │ ├── utils 封装工具目录 │ ├── main.ts - 项目入口文件 │ ├── permission.ts - 路有权限控制 ├── tsconfig.json - ts配置文件 ├── README.md - 说明文档 └── vite.config.js - vite 配置文件 ``` #### 安装运行 ``` bash ## 安装依赖 npm install || yarn ##或 cnpm install || yarn ## 启动项目 # 启动 npm run dev # 启动链接测试环境 npm run start ## 构建正式环境 - 打包 npm run build ``` #### 插件 nprogress 进度条 viteMockServe vite 的数据模拟插件 vueJsx > 使用jsx 语法 jsx语法可以更好地跟Typescript结合 在阅读UI框架源码时，发现在知名UI组件库Ant Design Vue跟Naive UI皆使用tsx语法开发 vite-svg-loader #### 参考 vite vue3 pinia 中文文档 :类vuex vue-router Tdesign Tdesign-cli tsconfig.json配置 #### 文档 tsconfig.json 配置整理 vite.config.js vite配置文件 src/config/proxy.ts 后端地址配置， ​ release：生成环境下的后端地址，使用npm run build有效 ， vite.config.ts：配置npm run dev的代理地址