VUE2版本模块化框架底座,所有新研发产品使用该底座进行研发。 ## 现在可以试试! > Vite4 Vue2 JavaScript Starter Template 需要 Node 版本 >= 16.14 ## 使用 ### 开发 > 只需要执行以下命令就可以在 http://localhost:3000 中看到 ```bash ## 安装依赖 npm install -g pnpm pnpm install > 若已安装pnpm请忽略npm install -g pnpm,直接执行pnpm install, pnpm8要求最低node版本16.14,若pnpm为其他版本请安装合适版本node ## 运行 npm run dev ``` ### 构建 ```bash ## 构建 npm run build ``` ### 低代码平台开发 > 启动低码服务器 ```bash ## 单独启动低码本地服务器(后续会进行改造,改造后就不需要单独启动了) pnpm yuxp ``` > 访问我的应用 目前配置了静态路由/yuxp-web/yuxp/myapps/index,通过浏览器地址栏可以进行访问 ### mock 模拟接口开发 1. 模拟接口文件路径遵循规范:`/mock/[模块名]/[功能名].mock.js` 2. CRUD模拟接口定义示例: `mock/demo/demo.mock.js` 3. 文件上传下载模拟接口定义示例: `mock/file/file.mock.js` 3. [更详细的文档](https://github.com/pengzhanbo/vite-plugin-mock-dev-server) ### 常见问题处理 #### 执行npm install -g pnpm时,若报request to https://registry.npmjs.org/pnpm failed,执行: npm config set _auth eXVzcC1ndWVzdDp5dXNwLWd1ZXN0== npm install -g pnpm@8.15.7 --registry=http://192.168.36.21:9018/repository/yx-npm-group/ #### husky -pre-commit hook 报‘node不是内部或外部命令,也不是可运行的程序 ​ 在windows上,我们用nvm控制node版本,在提交代码时,可能会遇到如下报错信息 ```sh git commit -m"feat: add test 'node' 不是内部或外部命令,也不是可运行的程序或批处理文件。 husky - pre-commit hook exited with code 1 (error) ``` ​ 导致无法进行提交代码,解决版本如下:项目根目录 `.husky/pre-commit` 和 `.husky/commit-msg` 将其中 npx 命令修改为 `node_modules/bin/*` 目录执行 ```sh #!/bin/sh . "$(dirname "$0")/_/husky.sh" node_modules/.bin/lint-staged # npx lint-staged #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" # npx --no-install commitlint --edit node_modules/.bin/commitlint --edit ``` ### logo图标切换 ``` src/style/images下带有logo的图: logo-full-black.svg (两处:登录页、忘记密码) logo-mini.svg (首页左上角logo图标) 标题: index.html baseFrameOptions.logoInfo.logoTitle ``` ### 统一规范 #### 输入框特殊符号限制 当前在@config/components.js中进行统一配置,不支持输入%,如确认输入框支持,则需要单独配置当前输入框 #### 表单统一规范 ##### 查询条件 统一展示4列,若页面为左右结构,左边为树一类的页面,右侧的列表查询条件展示3列 查询条件label文案需全部展示,若换行或出现省略号,需调整整列的label-width,需整列对齐 ##### 详情表单非弹窗:统一展示3列 ##### 弹窗 根据弹窗内容自行调节:      若内容特别少(5个及以内),默认展示1列,弹窗设置size="tiny";      若内容较少(6个-20个),默认展示2列,弹窗设置size="small";      若内容较少(20个以上),默认展示3列 ## 资保项目说明 ```sh xdjf-frame ├── mocks ├── packages # 平台框架npm包本地化(后续会删除) ├── public # 入口+静态资源位置 ├── src │ ├── api # oca框架层api封装 │ ├── assets # 静态资源 (样式、图片、字体图标) │ │ ├── common # 字体图标,通用样式 │ │ └── images # 框架层图片 │ ├── components # 组件 │ │ ├── base # 通用组件 │ │ │ └── ... │ │ ├── ToolBar # 工具库 │ │ │ └── ... │ │ ├── layout # 框架 │ │ │ └── ... │ │ └── widgets # 组件 │ │ └── ... │ ├── config # 配置文件 │ │ ├── constant # 接口请求相关配置 │ │ │ ├── app.data.service.js. # 全局后台API服务映射 │ │ │ ├── app.data.icons.js # 图标 │ │ │ └── app.datalookup.js # 静态字典 │ │ ├── axios # 拦截器配置 │ │ ├── other # 其他配置 │ │ │ ├── components.js # 自定义组件全局导入 │ │ │ ├── css.js # 导入CSS │ │ │ └── other.js # 其他辅助 │ │ ├── yuxp # 低码配置 │ │ ├── index.js # 配置入口 │ │ └── ... │ ├── locale # 多语言配置 & 资保多语言内容 │ ├── router # 产品/项目静态路由配置 │ │ ├── modules # 路由模块 │ │ │ ├── dsamp-routes.js # 资保静态路由 │ │ │ └── ... # 其他静态路由 │ ├── store # 存储器配置 │ │ ├── modules # 自定义组件全局导入 │ │ │ ├── dsampStore.js # 资保vuex存储文件 │ │ │ └── ... # 其他静态路由 │ ├── utils # 系统全局方法设定配置 │ ├── views # 页面内容 │ │ ├── dsamp-web # 资保业务代码目录 │ │ │ ├── api # 资保接口api封装 │ │ │ ├── assets # 资保静态资源目录 │ │ │ ├── auth # auth业务页面代码 │ │ │ ├── batch # batch业务页面代码 │ │ │ ├── common # 资保原有目录公共模块业务页面代码 │ │ │ ├── commonParam # 资保原有目录公共模块字典相关业务代码 │ │ │ ├── components # 资保业务代码相关自定义组件和公共组件 │ │ │ | └── features # 资保新增公共自定义组件(原老框架框架上组件) │ │ │ ├── config # 资保模块入口相关配置 │ │ │ │ └── main.js # 资保模块入口启动相关设置 │ │ │ ├── npam # 资保模块业务代码 │ │ │ └── ... # 其他业务代码 │ │ ├── framework # 框架相关页面代码 │ │ │ ├── oca首页代码 # oca首页代码内嵌资保首页代码 │ │ │ ├── dsampDashboard # 资保首页代码 │ │ │ ├── login # 登录 │ │ │ └── ... # 其他页面代码 │ │ ├── xpVue # 低码页面配置 │ ├── style # 样式 │ ├── app.vue # 入口页面 │ └── main.js # 入口文件 ├── tests # 单元测试模块 ├── .env.development # 开发环境配置文件 ├── .env.production # 生产环境配置文件 ├── .env.staging # 环境标识:自定义配置文件 ├── jest.config.js # 业务功能 ├── vite.config.js # vite配置文件 ├── package.json ... ``` - 项目业务代码位置:src/demo-web - 引用demo-web目录下的文件,使用'@xdjf/demo-web/xxx'即可 ### 常用用法 - 返回父级业务页面 核心逻辑:如果有需要返回历史页面标识,添加历史页面路由栈 location.needBackHistory = true 时,记录跳转父级页面,使用this.returnFn()方法进行返回 ```js this.$router.push({ path: '/laonContInfo', query: { ctrNo: row.ctrNo }, needBackHistory: true }); ```