多模块web系统分为客户端系统和管理端系统，采用VITE4 + VUE3实现, 使用Element-Plus组件进行二次封装，定制产品组件库。 状态管理库使用Pinia,三方包使用pnpm进行管理。

项目结构

mu-cloud-web 父工程，主要负责管理npm包版本，项目公共包应在改目录下使用pnpm install -S 安装，依赖信息记录在package.json文件。

com.kdaiyu.mu.components 医真云产品组件库，封装基础组件供业务模块使用，该组件库基于Elements UI 组件进行风格定制封装。

com.kdaiyu.mu.custom 客户端系统，包含所有客户端业务功能

com.kdaiyu.mu.manager 管理端系统，包含后台管理所有业务功能。

技术选型

组件	作用	备注
vue3	核心组件	vue3
vite4	构建组件	vite4
element-plus	核心UI库	Element-Plus
mitt	子代组件通信（类bus总线）	mitt, mitt参考资料
Pinia	状态管理，类vuex	pinia
unplugin-auto-import/vite	自动导入依赖包已添加vue、vue-router	unplugin-auto-import
axios	http请求组件，负责后端服务调用	axios
eslint	代码规范检查工具	eslint
vueuse	vue工具集（组合式API）事件、加密、存储、定时、节点管理、动画...	vueuse

环境搭建

https 配置

项目已配置https，本地开发需要在hosts文件添加如下记录。项目启动后控制台会有提示访问地址，使用域名进行访问。

127.0.0.1 local.kdaiyu.cn  ## 文件地址 C:\Windows\System32\drivers\etc\hosts

产品统一采用pnpm进行包管理，本地安装pnpm

npm install -g pnpm  # 安装pnpm库
pnpm set registry http://kdaiyu.com/repository/npm-group/ # 更换公司镜像站

pnpm install   #安装全部依赖
pnpm add (-D)  #安装指定包
pnpm remove    #移除指定包
pnpm run       #运行脚本

>>添加Eslint配置及插件安装

项目操作命令统一封装到项目根目录package.json中，默认dev模式启动，生成模式构建(-m 参数dev/prod)，可通过npm或pnpm执行。

# 构建应用默认生成模式，开发模式下eslint规则相对宽松，提交代码前建议手动执行一下，排除严格模式下是否有问题，线上发包采用严格模式。
pnpm run build:custom -test    # 构建custom应用, -test -prod 分别为测试和生产
pnpm run build:manager -test  # 构建manager应用

pnpm run run:custom      # 启动custom应用
pnpm run run:manager    # 启动manager应用
# 全量执行eslint检查并修复问题，开发工具有对应插件，增量代码保存时会执行
pnpm run lint            
# 全量执行代码格式修复，开发工具有对应插件，增量代码保存时会执行
pnpm run format