DM-ROW 接口文档

Appearance

项目配置与初始化 ​

**本文引用的文件** - [main.js](file://app/devicemate-app/main.js) - [App.vue](file://app/devicemate-app/App.vue) - [package.json](file://app/devicemate-app/package.json) - [vue.config.js](file://app/devicemate-app/vue.config.js) - [locale/index.js](file://app/devicemate-app/locale/index.js) - [locale/en.json](file://app/devicemate-app/locale/en.json) - [store/index.js](file://app/devicemate-app/store/index.js) - [store/modules/index.js](file://app/devicemate-app/store/modules/index.js) - [directive/index.js](file://app/devicemate-app/directive/index.js) - [config/request.js](file://app/devicemate-app/config/request.js) - [utils/localstorage.js](file://app/devicemate-app/utils/localstorage.js) - [config/login.js](file://app/devicemate-app/config/login.js) - [manifest.json](file://app/devicemate-app/manifest.json) - [pages.json](file://app/devicemate-app/pages.json) - [config/index.js](file://app/devicemate-app/config/index.js) - [uview-ui/index.js](file://app/devicemate-app/uview-ui/index.js)

目录 ​

  1. 简介
  2. 项目结构
  3. 核心组件
  4. 架构总览
  5. 详细组件分析
  6. 依赖关系分析
  7. 性能考虑
  8. 故障排查指南
  9. 结论
  10. 附录

简介 ​

本文件面向DeviceMate Vue.js Web应用的配置与初始化，系统性梳理从应用入口到运行期的关键配置与初始化流程，覆盖以下主题：

  • Vue实例创建与生命周期钩子
  • 国际化配置与动态语言切换
  • 状态管理初始化与模块组织
  • 自定义指令与全局原型方法扩展
  • 请求封装与鉴权头注入
  • 构建配置、开发服务器代理与生产优化
  • 第三方UI框架加载顺序与全局过滤器注册
  • 开发环境搭建、依赖管理与版本兼容建议

项目结构 ​

该工程采用uni-app多端统一编译架构，前端以Vue 2为基础，通过uView UI提供组件库能力，并通过pages.json声明页面与tabBar配置。核心入口为main.js，国际化、状态管理、指令与请求封装均在入口处集中初始化。

图表来源

章节来源

核心组件 ​

本节聚焦应用初始化阶段的核心模块及其职责：

  • 应用入口与实例创建：在main.js中完成插件注册、全局组件与原型方法注入，并创建Vue实例。
  • 国际化：locale/index.js基于系统语言缓存初始化i18n实例，并挂载到Vue原型。
  • 状态管理：store/index.js与store/modules/index.js组合各业务模块，形成Vuex Store。
  • 自定义指令：directive/index.js提供权限指令，按菜单权限控制DOM显示。
  • 请求封装：config/request.js统一封装GET/POST请求，自动注入鉴权头、国际化区域与时区等通用头。
  • 本地存储：utils/localstorage.js提供统一的本地缓存读写封装。
  • 登录校验：config/login.js提供登录状态判断与登录流程。
  • UI框架：uview-ui/index.js提供全局mixin、过滤器与工具方法，并挂载到uni.$u。

章节来源

架构总览 ​

下图展示从应用启动到请求调用的关键交互路径，体现初始化阶段的耦合关系与数据流向。

图表来源

详细组件分析 ​

Vue实例创建与初始化 ​

  • 入口脚本负责：
    • 引入App、store、i18n与指令
    • 安装uView UI
    • 注册全局组件（如滚动容器）
    • 注入$http、$db、$judgeLogin等原型方法
    • 设置App.mpType为'app'
    • 创建Vue实例并挂载

图表来源

章节来源

国际化配置与动态语言 ​

  • locale/index.js：
    • 基于系统语言缓存选择当前语言
    • 初始化VueI18n实例并导出
    • 将i18n挂载到Vue原型，便于组件内使用

图表来源

章节来源

状态管理初始化与模块组织 ​

  • store/index.js：
    • 安装Vuex并创建Store实例
    • 引入modules/index.js聚合各业务模块
  • store/modules/index.js：
    • 组织common、login、equipment、repair、maintain等模块

图表来源

章节来源

自定义指令与权限控制 ​

  • directive/index.js：
    • 定义权限指令，根据用户菜单列表与权限码控制元素显示
    • 提供递归查找菜单权限的辅助函数

图表来源

章节来源

请求封装与鉴权头注入 ​

  • config/request.js：
    • 统一封装GET/POST方法，自动注入通用头（Accept-Language、Request-From、Authorization等）
    • 支持国际化区域头与工厂时区头
    • 统一处理响应码、错误提示与401登出逻辑
    • 使用uni.request发起HTTP请求，支持超时与过滤开关

图表来源

章节来源

登录校验与应用生命周期 ​

  • config/login.js：
    • 提供登录状态判断与登录流程
  • App.vue：
    • 在onLaunch/onShow中执行升级检查、登录态校验与菜单拉取
    • 通过$judgeLogin与$judgeLogin配合实现无感登录与权限跳转

图表来源

章节来源

UI框架加载顺序与全局过滤器 ​

  • uview-ui/index.js：
    • 安装mixin与全局过滤器（时间格式化、多久以前等）
    • 将常用工具方法挂载到uni.$u与Vue.prototype.$u
    • 在main.js中先安装uView，再注册其他全局组件与原型方法，保证过滤器可用

章节来源

构建配置、开发服务器与生产优化 ​

  • vue.config.js：
    • publicPath设置为相对路径，适配多端打包
    • devServer开启代理，将/lemes-api前缀转发至目标服务
    • 生产环境关闭source map，提升安全性与体积
    • 保存日志输出NODE_ENV便于定位

章节来源

页面与tabBar配置 ​

  • pages.json：
    • easycom规则启用uView组件自动补全
    • 声明页面与tabBar，标题文本支持国际化占位符
    • 部分页面配置plus的titleNView按钮

章节来源

应用元信息与多端配置 ​

  • manifest.json：
    • 应用名称、版本、权限与打包配置
    • 多端（app-plus、mp-weixin等）特性开关
    • SSL忽略校验与统计开关

章节来源

依赖关系分析 ​

  • 入口依赖：main.js依赖locale、store、directive、request、localstorage、login、uview-ui与App。
  • 运行期依赖：App.vue依赖config/request与utils/localstorage；config/request依赖store与locale；config/login依赖request与baseUrl。
  • UI层依赖：uview-ui提供全局mixin与过滤器，需在main.js中优先安装。

图表来源

章节来源

性能考虑 ​

  • 构建优化：生产环境关闭source map，减少体积与安全风险。
  • 网络请求：统一超时时间与加载提示，避免频繁弹窗影响体验。
  • UI组件：通过easycom自动按需解析uView组件，减少手动引入成本。
  • 本地缓存：合理使用本地存储缓存用户信息与语言偏好，降低重复请求。

故障排查指南 ​

  • 登录态异常
    • 现象：401后自动跳转登录
    • 排查：确认鉴权头是否注入、本地存储是否清理、国际化区域头是否正确
  • 国际化不生效
    • 现象：界面语言未切换
    • 排查：确认系统语言缓存、locale配置与messages键值一致
  • 权限指令无效
    • 现象：按钮未按权限隐藏
    • 排查：确认用户菜单列表是否正确缓存、权限码是否匹配
  • 请求跨域或代理失败
    • 现象：/lemes-api前缀请求被拒绝
    • 排查：确认devServer代理target、rewrite规则与changeOrigin设置

章节来源

结论 ​

本项目通过入口脚本集中初始化国际化、状态管理、指令与请求封装，结合uView UI的全局能力，形成清晰的初始化链路。配合pages.json与manifest.json的多端配置，可稳定支撑H5、App与小程序等多端运行。建议在后续迭代中持续完善国际化词条、细化权限指令与请求拦截策略，并关注构建产物体积与首屏性能。

附录 ​

  • 开发环境搭建建议
    • 使用HBuilderX或VS Code + uni-app插件
    • 安装依赖后启动开发服务器，访问本地端口
    • 通过devServer代理联调后端接口
  • 依赖管理与版本兼容
    • Vue版本：2.x（见manifest.json）
    • UI框架：uView 1.x（见uview-ui/package.json）
    • 国际化：vue-i18n 9.x（见package.json）

章节来源