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

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 为如下效果
    tinymce

  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.