一、 整体目录结构

这个是大体结构,可能开发时候有所改变了。

树形图生成工具
Folder Explorer

├─.vscode -------------- // vscode 配置
├─public --------------- // 静态资源文件夹,不经过 webpack 处理
│ ├─auth --------------- // 第三方验证跳转页面
│ ├─config.js ---------- // 全局配置文件
│ ├─favicon.ico -------- // 网站图标
│ ├─html --------------- // 演示html文件
│ ├─images ------------- // 静态资源图片
│ ├─index.html --------- // 平台基础页面模板
│ ├─lib ---------------- // 第三方包
│ │ ├─babel ------------ // babel编译
│ │ ├─pdfjs-dist ------- // pdf文件预览
│ │ ├─sass-js ---------- // sass编译
│ │ └─UEditor ---------- // ueditor编辑器
│ └─subpage.html ------- // 平台子页面模板
├─README-zh.md --------- // 中文介绍
├─README.md ------------ // 英文介绍
├─src ------------------ // 源代码目录
│ ├─api ---------------- // 请求接口
│ ├─assets ------------- // 资源目录
│ ├─business ----------- // 业务组件
│ ├─components --------- // 通用组件
│ ├─constants ---------- // 全局常量
│ ├─directives --------- // 全局指令
│ ├─filters ------------ // 全局过滤
│ ├─layout ------------- // 平台布局
│ ├─locales ------------ // 国际化
│ ├─mixins ------------- // 全局通用混入
│ ├─plugins ------------ // 插件
│ ├─router ------------- // 路由
│ ├─store -------------- // vuex 存储
│ ├─utils -------------- // 工具类
│ ├─views -------------- // 页面视图
│ ├─App.vue ------------ // 平台根组件
│ ├─constants.js ------ // 变量默认配置
│ ├─env.js ------------- // env的环境常量
│ ├─i18n.js ------------ // 国际化配置入口
│ ├─main.js ------------ // 程序主入口
│ ├─public-path.js ----- // 
│ └─setting.js --------- // 默认设置
├─subpage -------------- // 子页面源码目录
├─tools --------------- // 相关配置设置【cdn依赖,国际化配置】
├─tests ---------------- // 单元测试源码目录
├─babel.config.js ------ //  babel 设置
├─.browserslistrc ------ // 浏览器配置
├─.editorconfig -------- // 代码编写规格配置
├─.env ----------------- // 【所有】环境配置
├─.env.development ----- // 【开发模式】环境变量配置
├─.env.prod.boot ------- // 【生产boot】环境配置
├─.env.prod.cloud ------ // 【生产cloud】环境配置
├─.env.prod.test ------- // 【生产test】环境配置
├─.env.production ------ // 【正式生产】环境配置
├─.env.staging --------- // 【演示或集成】环境配置
├─.eslintignore -------- // ESLint 的“忽略目录”配置
├─.eslintrc.js --------- // ESLint 的配置文件
├─.postcssrc.js -------- // postcss 插件设置
├─jest.config.js ------- // 单元测试配置
├─jsconfig.json -------- // js项目中配置编译选项以及语言服务设置
├─package-lock.json ---- // 锁定依赖版本【svn或git忽略】
├─package.json --------- // 项目信息和依赖
└─vue.config.js -------- // vue-cli3 的项目配置文件

二、src源码目录结构及说明

2.1 api 请求接口

统一调用后台的接口 请求函数,具体编写参考前后端联调开发

2.2 assets图标、主题 字体等静态资源

├── assets //图标、主题 字体等静态资源
│ ├── fonts // 图标字体
│ ├── images // 图片
│ ├── styles // 公共的自定义的样式、或修复的样式

2.3 business 业务组件

主要包含跟平台相关的业务相关的组件,例如表单渲染组件、数据模版组件,选择器组件、上传组件、数据字典组件等

business \# 组件目录
│ ├── bpmn // 流程模块
│ ├── form // 表单模块
│ ├── data // 数据模版模块
│ ├── org // 组织架构模块

2.4 components(组件)目录结构及说明

components \# 组件目录
│ ├── iform-address // 地址控件
│ ├── iform-avatar // 头像
│ ├── iform-back-to-top // 返回顶部
│ ├── iform-card-list // 卡片列表
│ ├── iform-container // 页面容器组件
│ ├── iform-container-frame // 页面iframe容器组件
│ ├── iform-crud // 增删改查组件
│ ├── iform-file-viewer // 文件预览组件
│ ├── iform-icon // 图标
│ ├── iform-icon-select // 图标选择器
│ ├── iform-icon-svg // svg 图标
│ ├── iform-icon-svg-select // svg 图标选择器
│ ├── iform-layout // 布局
│ ├── iform-link-btn // 链接按钮
│ ├── iform-list // 列表组件
│ ├── iform-toolbar // 工具栏组件
│ ├── iform-tree // 树扩展组件
│ ├── iform-tree-select // 下拉树组件
│ ├── iform-tree-table // 树表格组件
│ ├── iform-selector // 选择器
│ ├── iform-ueditor // UEditor 组件

2.5 constants 全局常量

定义的全局的常量,比如流程定义的的状态、文件类型

2.6 directives 全局指令

定义的全局的指令

2.7 filters 全局过滤器

定义的全局的过滤器,日期等

2.8 layout 布局

定义的全局的布局方式,目前支持4中方式的布局

  1. aside:侧边栏,
  2. header:顶部,
  3. header-aside:顶部+侧边栏
    4.none:空布局
    可以通过constant.js 进行配置

2.9 locales 国际化

定义的国际化语言,目前支持中文,英文、日文和繁体中文,通过BabelEdit进行编译翻译

2.10 mixins 混入

2.11 plugins 插件

2.12 router 路由

2.13 utils 工具类

定义的通用工具类,可以查看这里

2.14 views 页面

平台开发放置的页面,按模块划分

创建对应的文件夹,一般性一个路由对应一个文件,该模块下的功能组件或者方法就建议在本文件夹下创建一个utils或components文件夹,各个功能模块维护自己的utils或components组件。

作者:hugh  创建时间:2023-12-25 15:07
最后编辑:hugh  更新时间:2024-11-25 19:17