wangyifang
/
cz-hjjc-ht
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b32f066156'
${ noResults }
cz-hjjc-ht/TECH_STACK.md

8.8 KiB
Raw Blame History Escape

技术栈文档

项目概述

项目名称：内控管理系统（cz-hjjc-ht）
项目版本：4.4.0
基础模板：vue-admin-template
开发端口：9530

核心技术栈

前端框架

  • Vue.js: 2.6.10
    • 渐进式 JavaScript 框架
    • 使用 Options API
    • 支持 Composition API（通过 @vue/composition-api）

UI 组件库

  • Element UI: 2.13.2

    • 基于 Vue 2.0 的桌面端组件库
    • 主要 UI 组件来源
    • 提供完整的组件生态

  • View Design (iView): 4.7.0

    • 企业级 UI 组件库
    • 作为 Element UI 的补充组件

状态管理

  • Vuex: 3.1.0

    • 集中式状态管理
    • 支持模块化 store 结构
    • 主要模块：app、permission、settings、user

  • vuex-persistedstate: ^4.1.0

    • Vuex 状态持久化插件
    • 将状态保存到 localStorage

路由管理

  • Vue Router: 3.0.6
    • 官方路由管理器
    • 支持动态路由、权限控制
    • 路由懒加载优化

HTTP 客户端

  • Axios: 0.18.1
    • 基于 Promise 的 HTTP 库
    • 支持请求/响应拦截器
    • 统一错误处理和加载状态管理
    • Bearer Token 认证

构建工具

  • Vue CLI: 4.4.4
    • 官方脚手架工具
    • 基于 Webpack 的构建配置
    • 开发服务器、热更新支持

CSS 预处理器

  • Less: ^3.13.1

    • CSS 预处理器
    • less-loader ^5.0.0

  • Sass/SCSS: 1.26.8

    • CSS 预处理器
    • sass-loader 8.0.2

图表与可视化

  • ECharts: ^5.0.0
    • 数据可视化图表库
    • 用于仪表盘和报表展示
    • 支持多种图表类型

文档处理

  • @vue-office/docx: ^1.6.2

    • Word 文档预览组件

  • @vue-office/excel: ^1.7.11

    • Excel 文档预览组件

  • @vue-office/pdf: ^2.0.2

    • PDF 文档预览组件

  • docx-preview: ^0.3.2

    • Word 文档预览库

富文本编辑器

  • wangeditor: ^4.7.12
    • 轻量级富文本编辑器
    • 支持 Markdown

工具库

  • moment: ^2.29.4

    • 日期时间处理库
    • 通过 Vue.prototype.$moment 全局使用

  • js-cookie: 2.2.0

    • Cookie 操作工具
    • 用于 Token 存储

  • path-to-regexp: 2.4.0

    • 路径匹配工具
    • 路由匹配支持

  • nprogress: 0.2.0

    • 页面加载进度条
    • 提升用户体验

  • normalize.css: 7.0.0

    • CSS 重置样式
    • 统一浏览器默认样式

其他功能库

  • vue-grid-layout: ^2.4.0

    • 网格布局组件
    • 支持拖拽和调整大小
    • 用于仪表盘布局

  • html2canvas: ^1.4.1

    • HTML 转 Canvas 工具
    • 用于截图功能

  • print-js: ^1.6.0

    • 打印功能库
    • 支持 HTML、PDF、图片打印

  • element-resize-detector: ^1.2.4

    • 元素尺寸监听工具
    • 用于响应式布局

  • @vue/composition-api: ^1.7.2

    • Composition API 支持（Vue 2）
    • 为 Vue 3 迁移做准备

  • vue-demi: ^0.14.6

    • 兼容 Vue 2/3 的工具库

微前端支持

  • Wujie（无界）
    • 支持微前端架构
    • 可在 iframe 中运行
    • 支持生命周期管理（MOUNT/UNMOUNT）
    • 支持独立运行模式和嵌入模式

核心依赖

  • core-js: 3.6.5
    • JavaScript 标准库 polyfill
    • 提供 ES6+ 特性支持

开发工具

代码规范

  • ESLint: 6.7.2
    • 代码质量检查工具
    • 支持 Vue 文件检查（eslint-plugin-vue 6.2.2）
    • 使用 babel-eslint ^8.2.2 作为解析器

测试框架

  • Jest: 通过 @vue/cli-plugin-unit-jest
    • 单元测试框架
    • 使用 @vue/test-utils 1.0.0-beta.29
    • babel-jest 23.6.0 用于转译

编译工具

  • Babel
    • @vue/cli-plugin-babel 4.4.4
    • babel-plugin-dynamic-import-node 2.3.3
    • 开发环境动态导入优化

构建优化

  • SVG 处理

    • svg-sprite-loader 4.1.3 - SVG 图标精灵图
    • svgo 1.2.2 - SVG 优化工具

  • 代码分割

    • chunk-libs: 第三方库分离
    • chunk-elementUI: Element UI 单独打包
    • chunk-commons: 公共组件分离（最小引用 3 次）
    • runtime chunk: 运行时代码分离

  • 构建优化插件

    • script-ext-html-webpack-plugin 2.1.3 - 内联运行时脚本

Mock 数据

  • mockjs: 1.0.1-beta3
    • 生成随机数据
    • 拦截 Ajax 请求
    • 用于开发环境数据模拟

其他开发工具

  • chalk: 2.4.2 - 终端颜色输出
  • runjs: 4.3.2 - 脚本运行工具
  • connect: 3.6.6 - HTTP 服务器
  • serve-static: 1.13.2 - 静态文件服务

项目配置

开发服务器

  • 端口：9530（默认）
  • 自动打开浏览器：是
  • 热更新：支持
  • 代理配置：支持多个 API 代理
    • /old -> 旧版系统
    • /oa -> OA 系统
    • 主 API -> VUE_APP_BASE_API

环境变量

  • VUE_APP_MODULE_NAME: 模块名称（用于路由和构建路径）
  • VUE_APP_BASE_API: API 基础路径
  • VUE_APP_OUT_URL: 外部系统 URL
  • VUE_APP_OUT_OLD: 旧版外部系统 URL

路径别名

  • @: 指向 src 目录

浏览器兼容性

  • 支持所有市场份额 > 1% 的浏览器
  • 最后两个版本
  • 现代浏览器和 IE 10+

项目结构特点

权限控制

  • 基于角色的权限管理（RBAC）
  • 路由级别权限控制
  • 动态路由生成
  • 按钮级别权限控制

多模式支持

  • 独立运行模式：直接访问应用
  • iframe 嵌入模式：嵌入到其他系统中
  • 微前端（Wujie）模式：作为微前端子应用

错误处理

  • 全局错误捕获：Vue.config.errorHandler
  • iframe 环境错误上报：向父窗口上报错误
  • Axios 请求错误统一处理：统一错误提示和处理

自定义组件

  • LxHeader: 自定义头部组件
  • XyTable: 自定义表格组件
  • XyDialog: 自定义对话框组件
  • XySelectors: 自定义选择器组件
  • PlanPicker: 计划选择器组件
  • Breadcrumb: 面包屑导航
  • Pagination: 分页组件

主要功能模块

根据项目结构，主要包含以下业务模块：

  1. 预算管理 (budget)

    • 预算编制、审核、执行
    • 预算汇总、上报
    • 预算目标管理

  2. 合同管理 (contract)

    • 合同列表、详情
    • 合同签订
    • 合同集成

  3. 绩效管理 (achievements)

    • 评价管理
    • 积分管理
    • 类型管理

  4. 部门进度 (departmentProgress)

    • 部门工作进度跟踪

  5. 财务管理 (finance)

    • 收支管理
    • 资金登记

  6. 系统管理 (system/sysManage)

    • 用户管理
    • 角色管理
    • 权限管理
    • 菜单管理
    • 字典管理
    • 日志管理

  7. 仪表盘 (dashboard)

    • 数据可视化
    • 通知公告

  8. 其他功能

    • 请假管理 (away)
    • 借阅管理 (borrow)
    • 安装部署 (install)
    • 预览功能 (preview)
    • 统计报表 (statisticalReport)

运行环境要求

  • Node.js: >= 8.9
  • npm: >= 3.0.0

常用命令

# 开发环境
npm run dev

# 生产环境构建
npm run build:prod

# 预发布环境构建
npm run build:stage

# 预览构建结果
npm run preview

# 代码检查
npm run lint

# 单元测试
npm run test:unit

# 代码检查和测试
npm run test:ci

# SVG 优化
npm run svgo

技术栈版本总结

分类 技术 版本
前端框架 Vue 2.6.10
UI 库 Element UI 2.13.2
UI 库 View Design 4.7.0
状态管理 Vuex 3.1.0
路由 Vue Router 3.0.6
HTTP Axios 0.18.1
构建工具 Vue CLI 4.4.4
CSS 预处理器 Less ^3.13.1
CSS 预处理器 Sass 1.26.8
图表库 ECharts ^5.0.0
日期处理 moment ^2.29.4
富文本编辑器 wangeditor ^4.7.12
测试框架 Jest -
代码规范 ESLint 6.7.2
微前端 Wujie -

技术栈特点

优势

  1. 成熟稳定：基于 Vue 2 + Element UI 的成熟方案
  2. 功能完整：包含完整的后台管理系统功能
  3. 多模式支持：支持独立运行、iframe、微前端多种部署方式
  4. 权限完善：完整的权限控制系统
  5. 文档支持：支持 Office 文档预览

注意事项

  1. Axios 版本较旧：当前使用 0.18.1，建议升级到最新版本以获得更好的安全性和功能支持
  2. Vue 2 项目：项目基于 Vue 2.6，如需升级到 Vue 3，需要大量重构工作
  3. 微前端兼容：项目支持多种运行模式，在修改入口文件时需要确保兼容性
  4. 生产环境构建：构建产物输出到 ../cz_hjjc/public/${VUE_APP_MODULE_NAME}，需要配置相应的环境变量
  5. 依赖更新：部分依赖版本较旧，建议定期更新以获取安全补丁

项目构建输出

  • 输出目录：../cz_hjjc/public/${VUE_APP_MODULE_NAME}
  • 静态资源目录：static
  • 源码映射：生产环境关闭（productionSourceMap: false）

文档生成时间：基于 package.json 和项目结构分析
项目路径：/Users/weizongsong/www/cz-hjjc-ht