已弃用,请使用官方最新版本。
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.js
hack 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.