已弃用,请使用官方最新版本。
Jeecg-vue-tmpl 修改自原版 JeecgBoot 前端项目,根据自身需求进行若干修改,如果有其它需求,比如使用 online 开发功能,建议直接拉取官方代码自行修改,此自用项目模板维护至 2.4.2 版本不再更新。
关于版本
暂未发现前端版本与 jeecg 后端版本不同时有何问题,如有问题,请使用官方项目。
参考文档
JeecgBoot 官方文档见 http://doc.jeecg.com
JeecgBoot 官方更新日志见 http://www.jeecg.com/doc/log
自用模板项目 Readme 见 Jeecg-vue-tmpl Readme
更多参考文档见 Jeecg-vue-tmpl Readme 参考链接部分
修改内容
添加部分 npm 脚本
如
yarn deploy:通过rsync命令自动部署到服务器,如
yarn scp:无 Linux 环境时,通过scp命令自动部署到服务器,如
yarn build:repo:生成打包分析文件帮助分析文件大小,具体用法见项目 Readme: Jeecg-vue-tmpl Readme。
添加 git hooks
"gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,vue}": [ "vue-cli-service lint", "git add" ] }移除 online 开发部分,原因是占用体积较大且暂时未用到,如需使用,拉取官方前端代码自行使用
移除自带地区选择组件
添加部分依赖
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 />使用
添加
jsconfig.json文件,使 vscode 提供智能补全等功能添加 vscode 工作区设置文件,扩展推荐文件,建议使用 vscode 并安装相关插件进行开发
对整体代码按 eslint 规则格式进行 fix
添加环境变量文件,区分开发与生产环境使用
NODE_ENV = 'development' # API 接口地址 VUE_APP_BASE_API = '' # 系统名称 VUE_APP_LOGO_TITLE = 'Admin' # [暂不可用] 是否需要错误上报(钉钉机器人提醒) VUE_APP_NEED_REPO = 'no'配置 eslint 规则,主要使用 eslint 官方推荐规则、vue 官方推荐规则与 standard 规则,并忽略部分难以修改的 jeecg 代码
修改
vue.config.js配置文件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 主题色
配置开发环境代理
添加 tinymce powepaste 插件,修改皮肤文件结构
将一些在线图标改为本地图标,置于
public/default文件夹下将
polyfill.js替换为压缩后的polyfill.min.js打包完后可在
index.html中直接修改接口前缀地址,方便部署时修改添加自动生成组件文件的 nodejs 脚本
添加路由切换时的 transition 效果
将
~@/assets/less/common.less通用样式文件置于App.vue中加载,不再在组件中重复加载修改项目默认配置项
@/defaultSettings.js在
@/main.js中移除不用的 import在
@/permission.js中添加不勾选自动登录时的处理办法在
@/api/manage.js中添加相关 JSDoc 声明,方便类型联想;并添加导出后端生成文件方法:getBlob修改一些样式置于
@/assets/less/cover.less按自身需求修改
@/components/chart下的图表组件修改 tinymce 富文本编辑器组件
JEditor为如下效果
添加时间选择组件
JTime添加上传按钮组件
JUploadBtn、拖拽上传图片组件JUploadImageD添加自动拼接 jeecg 文件前缀 url 的组件
MyImg添加搜索筛选组件
SearchFilter与模板中的 switch case 组件<v-switch />修改 Logo 组件、搜索菜单组件,添加时间显示组件、待办事项组件
添加百分比输入组件
PercentNum@/icons为自定义图标存放处修改通用列表混入文件
@/mixins/JeecgListMixin.jshack router push callback
添加工具方法 点击复制
@/src/utils/clipboard.js于
@/src/utils/dicts.js添加数据字典翻译函数transDict并且将其添加到过滤器于
@/src/utils/hasPermission.js中添加当v-has指令不便使用时的替代函数:checkPermission添加自用工具方法
@/src/utils/index.js封装 axios :
@/src/utils/request.js封装 localStorage、sessionStorage:
@/src/utils/storage.js@/src/utils/validate.js中添加身份证号校验layouts 移至 views 文件夹中
组件文档
Jeecg 组件文档见官网文档或 docs文件夹下或各组件位置处的 md 文件
自用文档见 Jeecg-vue-tmpl 自用文档
fin.
