jianggs 069cfd5861 前端基础框架更新 há 4 dias atrás
..
docs 069cfd5861 前端基础框架更新 há 4 dias atrás
mock 069cfd5861 前端基础框架更新 há 4 dias atrás
public 069cfd5861 前端基础框架更新 há 4 dias atrás
src 069cfd5861 前端基础框架更新 há 4 dias atrás
.editorconfig 069cfd5861 前端基础框架更新 há 4 dias atrás
.env 069cfd5861 前端基础框架更新 há 4 dias atrás
.env.development 069cfd5861 前端基础框架更新 há 4 dias atrás
.env.production 069cfd5861 前端基础框架更新 há 4 dias atrás
.eslintignore 069cfd5861 前端基础框架更新 há 4 dias atrás
.eslintrc.js 069cfd5861 前端基础框架更新 há 4 dias atrás
.gitignore 069cfd5861 前端基础框架更新 há 4 dias atrás
.npmrc 069cfd5861 前端基础框架更新 há 4 dias atrás
.postcssrc.js 069cfd5861 前端基础框架更新 há 4 dias atrás
.prettierignore 069cfd5861 前端基础框架更新 há 4 dias atrás
.prettierrc.js 069cfd5861 前端基础框架更新 há 4 dias atrás
.stylelintignore 069cfd5861 前端基础框架更新 há 4 dias atrás
.xy-tsd.js 069cfd5861 前端基础框架更新 há 4 dias atrás
.yarnrc 069cfd5861 前端基础框架更新 há 4 dias atrás
Dockerfile 069cfd5861 前端基础框架更新 há 4 dias atrás
LICENSE 069cfd5861 前端基础框架更新 há 4 dias atrás
build-proxy.js 069cfd5861 前端基础框架更新 há 4 dias atrás
commitlint.config.js 069cfd5861 前端基础框架更新 há 4 dias atrás
default.conf 069cfd5861 前端基础框架更新 há 4 dias atrás
dev.sh 069cfd5861 前端基础框架更新 há 4 dias atrás
dns.sh 069cfd5861 前端基础框架更新 há 4 dias atrás
docker-compose.yml 069cfd5861 前端基础框架更新 há 4 dias atrás
index.html 069cfd5861 前端基础框架更新 há 4 dias atrás
jsconfig.json 069cfd5861 前端基础框架更新 há 4 dias atrás
package.json 069cfd5861 前端基础框架更新 há 4 dias atrás
pnpm-lock.yaml 069cfd5861 前端基础框架更新 há 4 dias atrás
prod.sh 069cfd5861 前端基础框架更新 há 4 dias atrás
publish.js 069cfd5861 前端基础框架更新 há 4 dias atrás
readme.md 069cfd5861 前端基础框架更新 há 4 dias atrás
stylelint.config.js 069cfd5861 前端基础框架更新 há 4 dias atrás
test.sh 069cfd5861 前端基础框架更新 há 4 dias atrás
testnew.html 069cfd5861 前端基础框架更新 há 4 dias atrás
vite.config.js 069cfd5861 前端基础框架更新 há 4 dias atrás
yarn.lock 069cfd5861 前端基础框架更新 há 4 dias atrás

readme.md

VUE2版本模块化框架底座,所有新研发产品使用该底座进行研发。

现在可以试试!

Vite4 Vue2 JavaScript Starter Template 需要 Node 版本 >= 16.14

使用

开发

只需要执行以下命令就可以在 http://localhost:3000 中看到


## 安装依赖
npm install -g pnpm
pnpm install

> 若已安装pnpm请忽略npm install -g pnpm,直接执行pnpm install, pnpm8要求最低node版本16.14,若pnpm为其他版本请安装合适版本node

## 运行
npm run dev

构建

## 构建
npm run build

低代码平台开发

启动低码服务器

## 单独启动低码本地服务器(后续会进行改造,改造后就不需要单独启动了)
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
  4. 更详细的文档

常见问题处理

执行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版本,在提交代码时,可能会遇到如下报错信息

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/* 目录执行

#!/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列

资保项目说明

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()方法进行返回

    this.$router.push({
    path: '/laonContInfo',
    query: {
    ctrNo: row.ctrNo
    },
    needBackHistory: true
    });