已弃用,请使用官方最新版本。

Jeecg-vue-tmpl 修改自原版 JeecgBoot 前端项目,根据自身需求进行若干修改,如果有其它需求,比如使用 online 开发功能,建议直接拉取官方代码自行修改,此自用项目模板维护至 2.4.2 版本不再更新。

关于版本

暂未发现前端版本与 jeecg 后端版本不同时有何问题,如有问题,请使用官方项目。

参考文档

修改内容

  1. 添加部分 npm 脚本

    • yarn deploy :通过 rsync 命令自动部署到服务器,

    • yarn scp :无 Linux 环境时,通过 scp 命令自动部署到服务器,

    • yarn build:repo :生成打包分析文件帮助分析文件大小,

    • 具体用法见项目 Readme: Jeecg-vue-tmpl Readme

  2. 添加 git hooks

    "gitHooks": {
      "pre-commit": "lint-staged"
    },
    "lint-staged": {
      "*.{js,vue}": [
        "vue-cli-service lint",
        "git add"
      ]
    }
  3. 移除 online 开发部分,原因是占用体积较大且暂时未用到,如需使用,拉取官方前端代码自行使用

  4. 移除自带地区选择组件

  5. 添加部分依赖

    • moment-range : Fancy date ranges for Moment.js,日期范围计算

    • numeral: Format and manipulate numbers,数字格式化、精确计算

    • v-distpicker : 省市区下拉选择框

    • @vue/eslint-config-standard: eslint 之 standard 规则

    • compression-webpack-plugin :打包时进行 gzip 压缩

    • lint-staged :往 git 提交代码时进行 eslint 校验

    • serve: 本地静态服务器

    • vue-svg-loader: Use SVG files as Vue Components,自定义图标配合 <a-icon /> 使用

  6. 添加 jsconfig.json 文件,使 vscode 提供智能补全等功能

  7. 添加 vscode 工作区设置文件,扩展推荐文件,建议使用 vscode 并安装相关插件进行开发

  8. 对整体代码按 eslint 规则格式进行 fix

  9. 添加环境变量文件,区分开发与生产环境使用

    NODE_ENV = 'development'
    # API 接口地址
    VUE_APP_BASE_API = ''
    # 系统名称
    VUE_APP_LOGO_TITLE = 'Admin'
    # [暂不可用] 是否需要错误上报(钉钉机器人提醒)
    VUE_APP_NEED_REPO = 'no'
  10. 配置 eslint 规则,主要使用 eslint 官方推荐规则、vue 官方推荐规则与 standard 规则,并忽略部分难以修改的 jeecg 代码

  11. 修改 vue.config.js 配置文件

    • 官方参考文档 https://cli.vuejs.org/zh/config/

    • moment 语言包只加载中文

      configureWebpack: config => {
       // moment 语言包只加载 zh-cn; load `moment/locale/zh-cn.js`
       config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/))
      },
    • 配置 svg loader

    • 打包文件优化,合并小文件

    • 配置 gzip 压缩,提高加载速度

    • 修改 ant-design-vue 主题色

    • 配置开发环境代理

  12. 添加 tinymce powepaste 插件,修改皮肤文件结构

  13. 将一些在线图标改为本地图标,置于 public/default 文件夹下

  14. polyfill.js 替换为压缩后的 polyfill.min.js

  15. 打包完后可在 index.html 中直接修改接口前缀地址,方便部署时修改

  16. 添加自动生成组件文件的 nodejs 脚本

  17. 添加路由切换时的 transition 效果

  18. ~@/assets/less/common.less 通用样式文件置于 App.vue 中加载,不再在组件中重复加载

  19. 修改项目默认配置项 @/defaultSettings.js

  20. @/main.js 中移除不用的 import

  21. @/permission.js 中添加不勾选自动登录时的处理办法

  22. @/api/manage.js 中添加相关 JSDoc 声明,方便类型联想;并添加导出后端生成文件方法:getBlob

  23. 修改一些样式置于@/assets/less/cover.less

  24. 按自身需求修改 @/components/chart 下的图表组件

  25. 修改 tinymce 富文本编辑器组件 JEditor 为如下效果

  26. 添加时间选择组件 JTime

  27. 添加上传按钮组件 JUploadBtn 、拖拽上传图片组件 JUploadImageD

  28. 添加自动拼接 jeecg 文件前缀 url 的组件 MyImg

  29. 添加搜索筛选组件 SearchFilter 与模板中的 switch case 组件 <v-switch />

  30. 修改 Logo 组件、搜索菜单组件,添加时间显示组件、待办事项组件

  31. 添加百分比输入组件 PercentNum

  32. @/icons为自定义图标存放处

  33. 修改通用列表混入文件 @/mixins/JeecgListMixin.js

  34. hack router push callback

  35. 添加工具方法 点击复制 @/src/utils/clipboard.js

  36. @/src/utils/dicts.js 添加数据字典翻译函数 transDict 并且将其添加到过滤器

  37. @/src/utils/hasPermission.js中添加当 v-has 指令不便使用时的替代函数: checkPermission

  38. 添加自用工具方法 @/src/utils/index.js

  39. 封装 axios : @/src/utils/request.js

  40. 封装 localStorage、sessionStorage:@/src/utils/storage.js

  41. @/src/utils/validate.js 中添加身份证号校验

  42. layouts 移至 views 文件夹中

组件文档

Jeecg 组件文档见官网文档或 docs文件夹下或各组件位置处的 md 文件

自用文档见 Jeecg-vue-tmpl 自用文档


fin.