多模块Web系统

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

项目结构

kdaiy-kplus
|-- lerna.json
|-- package.json
|-- packages  # 存放所有模块，lerna.json配置模块规则
|   |-- components
|   |   |-- package.json
|   |   `-- src
|   |-- kplus-admin  # 管理模块
|   |   |-- html
|   |   |-- index.html
|   |   |-- package.json
|   |   |-- public
|   |   |-- src
|   |   `-- vite.config.js
|   `-- kplus-web   # 业务模块
|       |-- assets
|       |-- index.html
|       |-- node_modules
|       |-- package.json
|       |-- src
|       `-- vite.config.js
|-- pnpm-lock.yaml
`-- pnpm-workspace.yaml   # pnpm workspace实现子父模块依赖管理

kdaiy-kplus 父工程，主要负责管理npm包版本，项目公共包应在改目录下使用pnpm install -S 安装，依赖信息记录在package.json文件。packages目录下的素有目录为子模块，通过lerna实现模块管理、依赖。

components 封装基础组件供业务模块使用，该组件库基于Elements UI 组件进行风格定制封装，工具集，通用业务组件。

kplus-web 业务系统，包含所有客户端业务功能

kplus-admin 管理端系统，包含后台管理所有业务功能。

技术选型

组件	作用	备注
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中，通过lerna执行对于模块的命令，便于调试、打包。参考配置如下

{
  "name": "kplus",
  "private": true,
  "scripts": {
    // 注意： lerna run 后面的命令在对于的子模块package.json中需要存在。
    "admin:run": "lerna run dev --scope kplus-admin",
    "web:run": "lerna run dev --scope kplus-web",
    "admin:build": "lerna run build --scope kplus-admin",
    "web:build": "lerna run build --scope kplus-web",
    "all:build": "lerna run build",
    "lint": "pnpm dlx eslint . --fix-dry-run --ignore-pattern ./**/node_modules/*,./**/assets"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@vueuse/core": "^12.5.0",
    "axios": "^1.7.2",
    "cross-env": "^7.0.3",
    "crypto-js": "^4.2.0",
    "element-plus": "^2.9.3",
    "jsencrypt": "3.3.2",
    "kplus-components": "workspace:^",
    "lodash-es": "^4.17.21",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.10.4",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/eslint-config-prettier": "^8.0.0",
    "eslint": "^9.18.0",
    "eslint-plugin-vue": "^9.27.0",
    "lerna": "^8.1.9",
    "prettier": "^3.3.3",
    "sass": "1.77.5",
    "unplugin": "^1.12.0",
    "unplugin-auto-import": "^19.0.0",
    "unplugin-icons": "^0.19.1",
    "vite": "^6.0.11",
    "vite-plugin-compression": "0.5.1",
    "vite-plugin-svg-icons": "2.0.1"
  }
}

pnpm install  # 安装所有依赖
pnpm run admin:run    # 启动admin模块
pnpm run web:run      # 启动业务模块

pnpm run admin:build  # 构建admin模块
pnpm run web:build    # 构建业务模块

方案缺点

• 1. lerna + pnpm workspace 方式，在父模块中通过lerna run dev --scope kplus-xxx方式启动子模块无法加载正确的env变量。

最佳实践：直接采用pnpm workspace 的方式管理项目，移除项目中的lerna。启动脚本调整为：

{
  "scripts": {
    "admin:run": "pnpm --filter kplus-admin dev",
    "web:run": "pnpm --filter kplus-web dev",
    "admin:build": "pnpm --filter kplus-admin build",
    "web:build": "pnpm --filter kplus-web build",
    "all:build": "pnpm --filter kplus-* build",
    "lint": "pnpm dlx eslint . --fix-dry-run --ignore-pattern ./**/node_modules/*,./**/assets"
  }
}