开发目录结构

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

整体目录结构

├─.browserslistrc ------------------------ //  目标浏览器配置
├─.editorconfig ------------------------ // 代码编写规格配置
├─.env ----------------------------------- // 基础环境变量配置
├─.env.development ----------------------- // 开发模式下的环境变量配置
├─.env.prod207 --------------------------- // 生产【207】模式下的环境变量配置
├─.env.prodcloud ------------------------- // 生产【cloud】模式下的环境变量配置
├─.env.production ------------------------ // 正式模式下的环境变量配置
├─.env.staging --------------------------- // 测试环境模式下的环境变量配置
├─.eslintignore -------------------------- // ESLint 的忽略目录配置
├─.eslintrc.js --------------------------- // ESLint 的配置文件
├─.postcssrc.js -------------------------- // postcss 插件设置
├─.travis.yml ---------------------------- // Travis 自动化CI配置文件
├─.vscode -------------------------------- // vscode 配置
│ └─settings.json 
├─babel.config.js ------------------------ // babel 设置
├─build ---------------------------------- // 构建相关
├─jest.config.js ------------------------- // 单元测试配置
├─package-lock.json ---------------------- // 锁定依赖版本
├─package.json --------------------------- // 项目信息和依赖
├─public --------------------------------- // 静态资源文件夹，不经过 webpack 处理
│ ├─favicon.ico -------------------------- // 网站图标
│ ├─index.html --------------------------- // 网站的基础页面模板
│ └─static ------------------------------- // 静态资源
│   ├─images ----------------------------- // 图片
│   └─lib -------------------------------- // 第三方库
│     └─ueditor -------------------------- // Ueditor编辑器
├─README-zh.md --------------------------- // 中文介绍
├─README.md ------------------------------ // 英文介绍
├─src ------------------------------------ // 主要的源代码目录
│ ├─api ---------------------------------- // 请求接口
│ │ ├─baseUrl.js ------------------------- // 基础目录
│ │ ├─demo ------------------------------- // demo目录
│ │ ├─oauth2 ----------------------------- // oauth2
│ │ └─platform --------------------------- // 平台API
│ ├─App.vue ------------------------------ // 项目根组件
│ ├─assets ------------------------------- // 资源文件夹
│ │ ├─fonts ------------------------------ // 字体库
│ │ ├─images ----------------------------- // 图片
│ │ ├─styles ----------------------------- // 样式资源
│ │ │ ├─animate 
│ │ │ ├─bpmn-js -------------------------- // 流程图样式
│ │ │ ├─components ----------------------- // 组件样式
│ │ │ ├─fixed ---------------------------- // 覆盖一些组件库的默认样式
│ │ │ ├─iconfont ------------------------- // 字体库样式
│ │ │ ├─mixins --------------------------- // 混入
│ │ │ ├─pages ---------------------------- // 通用页面样式
│ │ │ ├─public-class.scss ---------------- // 导出可以直接使用的 class
│ │ │ ├─public.scss ---------------------- // 导出所有公用的 scss 资源
│ │ │ ├─theme ---------------------------- // 主题样式
│ │ │ │ ├─ibps 
│ │ │ │ ├─line 
│ │ │ │ ├─register.scss ------------------ // 注册所有主题样式
│ │ │ │ ├─star 
│ │ │ │ ├─theme-base.scss ---------------- // 每个主题共用的样式
│ │ │ │ ├─theme.scss --------------------- //  每个主题特有的设置
│ │ │ │ ├─tomorrow-night-blue 
│ │ │ │ └─violet 
│ │ │ ├─ueditor -------------------------- // ueditor样式
│ │ │ └─unit ----------------------------- // scss 的基础变量
│ │ │   └─color.scss 
│ │ └─svg-icons -------------------------- // svg 图标
│ │   ├─icons ---------------------------- // 用来存放图标的文件夹
│ │   ├─index.js ------------------------- // 自动导入所有符合条件的图标
│ │   └─svgo.yml 
│ ├─business ----------------------------- // 业务组件
│ │ └─platform 
│ │   ├─auth 
│ │   ├─bo 
│ │   ├─bpmn ----------------------------- // 工作流程
│ │   │ ├─bpm-inst-his 
│ │   │ ├─bpm-link 
│ │   │ ├─bpmn-js 
│ │   │ ├─components 
│ │   │ ├─constants 
│ │   │ │ └─index.js 
│ │   │ ├─definition 
│ │   │ ├─form 
│ │   │ ├─setting ------------------------ // 流程设置
│ │   │ │ ├─bpmn-image ------------------- // 流程设置-流程图
│ │   │ │ └─bpmn-setting ----------------- // 流程设置
│ │   │ │   ├─components 
│ │   │ │   ├─settings 
│ │   │ │   ├─types 
│ │   │ │   └─utils 
│ │   │ ├─task 
│ │   │ │ ├─approve.vue 
│ │   │ │ └─revocation.vue 
│ │   │ └─task-change 
│ │   │   └─edit.vue 
│ │   ├─cat 
│ │   │ ├─dictionary --------------------- // 数据字典组件
│ │   │ └─type --------------------------- // 分类
│ │   │   ├─select.vue ------------------- // 分类选择组件
│ │   │   ├─setting-type.vue 
│ │   │   └─tree.vue --------------------- // 分类树组件
│ │   ├─codegen 
│ │   │ └─table-config 
│ │   ├─codemirror ----------------------- // codemirror组件
│ │   │ ├─addon 
│ │   │ │ └─hint 
│ │   │ │   └─formula-hint.js 
│ │   │ └─mode 
│ │   ├─data ----------------------------- // 数据模版
│ │   │ ├─components --------------------- // 组件
│ │   │ │ ├─field ------------------------ // 字段组件
│ │   │ │ │ └─options.vue 
│ │   │ │ └─search-form ------------------ // 查询字段组件
│ │   │ │   ├─index.vue 
│ │   │ │   └─props.js 
│ │   │ ├─constants ---------------------- // 常量
│ │   │ │ ├─buttons.js 
│ │   │ │ ├─index.js 
│ │   │ │ └─setting-field.js 
│ │   │ ├─templatebuilder ---------------- // 数据模版配置
│ │   │ │ ├─dialog.vue 
│ │   │ │ ├─index.vue 
│ │   │ │ ├─left-aside 
│ │   │ │ ├─right-aside 
│ │   │ │ └─template-main 
│ │   │ └─templaterender ----------------- // 数据模版渲染界面
│ │   │   ├─custom-dialog ---------------- // 自定义对话框
│ │   │   └─link-data -------------------- // 关联数据组件
│ │   ├─file 
│ │   │ ├─attachment --------------------- // 附件选择器
│ │   │ ├─file-preview ------------------- // 文件预览
│ │   │ ├─image -------------------------- // 图片预览
│ │   │ ├─uploader ----------------------- // 附件上传组件
│ │   │ └─utils 
│ │   │   └─index.js 
│ │   ├─form ----------------------------- // 表单业务
│ │   │ ├─constants 
│ │   │ │ ├─buttonTypes.js 
│ │   │ │ ├─fieldOptions.js 
│ │   │ │ ├─fieldTypes.js 
│ │   │ │ ├─fileTypes.js 
│ │   │ │ └─formOptions.js 
│ │   │ ├─formbuilder -------------------- // 表单设计页面
│ │   │ │ ├─form-main -------------------- // 中部
│ │   │ │ ├─index.vue 
│ │   │ │ ├─left-aside ------------------- // 左侧
│ │   │ │ └─right-aside ------------------ // 表单右侧-字段设置界面
│ │   │ └─formrender --------------------- // 表单渲染
│ │   │   ├─button.js 
│ │   │   ├─dynamic-form ----------------- // 动态表单
│ │   │   └─index.vue 
│ │   ├─org 
│ │   │ ├─employee ----------------------- // 人员选择器
│ │   │ ├─group -------------------------- // 组选择器
│ │   │ ├─level -------------------------- // 等级选择器
│ │   │ ├─org ---------------------------- // 组织选择器
│ │   │ ├─position ----------------------- // 岗位选择器
│ │   │ ├─role --------------------------- // 角色选择器
│ │   │ └─selector ----------------------- // 组合选择器（包含以上的选择器）
│ │   └─system 
│ │     └─identity 
│ │       └─auto-number.vue -------------- // 自动编号
│ ├─components --------------------------- // 通用组件
│ │ ├─ibps-address ----------------------- // 地址组件
│ │ ├─ibps-back-to-top ------------------- // 返回顶部
│ │ ├─ibps-card-list --------------------- // 卡片列表
│ │ ├─ibps-checkbox ---------------------- // 多选扩展-支持字符串
│ │ ├─ibps-container --------------------- //  页面容器组件
│ │ │ └─components 
│ │ │   ├─ibps-container-card-bs.vue 
│ │ │   ├─ibps-container-card.vue 
│ │ │   ├─ibps-container-full-bs.vue 
│ │ │   ├─ibps-container-full.vue 
│ │ │   ├─ibps-container-ghost-bs.vue 
│ │ │   └─ibps-container-ghost.vue 
│ │ ├─ibps-container-frame --------------- // 页面iframe容器组件
│ │ ├─ibps-contextmenu ------------------- // 右键菜单组件
│ │ ├─ibps-icon -------------------------- // 字体图标
│ │ ├─ibps-icon-select ------------------- //  图标选择器
│ │ ├─ibps-icon-svg ---------------------- // svg 图标
│ │ ├─ibps-icon-svg-select --------------- // svg 图标选择器
│ │ ├─ibps-layout ------------------------ // 布局组件
│ │ ├─ibps-link -------------------------- // 链接组件
│ │ ├─ibps-link-btn ---------------------- // 链接按钮组件
│ │ ├─ibps-list -------------------------- // 列表组件
│ │ ├─ibps-number-range ------------------ // 数字范围组件
│ │ ├─ibps-query-builder 
│ │ ├─ibps-selector ---------------------- // 选择器框架
│ │ ├─ibps-signature --------------------- // 签名组件
│ │ ├─ibps-skeleton ---------------------- // 骨架屏组件
│ │ ├─ibps-tinymce 
│ │ ├─ibps-toolbar ----------------------- // 工具栏组件
│ │ ├─ibps-tree -------------------------- // 树扩展组件
│ │ ├─ibps-tree-select ------------------- // 下拉树组件
│ │ ├─ibps-tree-table 
│ │ ├─ibps-ueditor ----------------------- // 富文本框组件
│ │ ├─ibps-websocket 
│ │ └─index.js 
│ ├─constants ---------------------------- // 全局常量
│ │ ├─buttons.js 
│ │ ├─common.js 
│ │ └─state.js 
│ ├─directives --------------------------- // 全局指令
│ │ ├─clipboard 
│ │ ├─el-drag-dialog 
│ │ ├─permission 
│ │ ├─pinyin 
│ │ └─sticky 
│ │   └─index.js 
│ ├─filters ------------------------------ // 全局过滤
│ ├─i18n --------------------------------- // 国际化
│ │ ├─bpmn-js ---------------------------- // 流程图国际化
│ │ ├─index.js 
│ │ └─lang ------------------------------- // 全局国际化
│ ├─layout ------------------------------- // 布局页面
│ │ ├─custom-layout.vue ------------------ // 自定义布局
│ │ ├─header-aside ----------------------- //  头部-左侧布局
│ │ └─index.js 
│ ├─main.js ------------------------------ //  程序主入口
│ ├─mixins ------------------------------- // 通用混入
│ ├─pages -------------------------------- // 通用页面
│ │ ├─dashboard 
│ │ ├─error 
│ │ ├─forget 
│ │ ├─locking 
│ │ ├─login 
│ │ ├─register 
│ │ └─system 
│ ├─permission.js ------------------------ // 权限路由
│ ├─plugins ------------------------------ // 插件
│ │ ├─error 
│ │ ├─ibps 
│ │ ├─log 
│ │ └─open 
│ ├─router ------------------------------- //  路由
│ │ ├─index.js 
│ │ ├─router.js 
│ │ ├─_import_development.js 
│ │ └─_import_production.js 
│ ├─setting.js --------------------------- // 默认设置
│ ├─store -------------------------------- // vuex
│ │ ├─getters.js 
│ │ ├─index.js 
│ │ └─modules 
│ │   └─ibps 
│ │     ├─index.js 
│ │     └─modules 
│ ├─utils -------------------------------- // 工具类
│ │ ├─action.js -------------------------- // 增删改查、按钮事件工具类
│ │ ├─auth.js 
│ │ ├─avatar.js -------------------------- // 头像工具类
│ │ ├─button.js -------------------------- // 按钮工具类
│ │ ├─dialog.js 
│ │ ├─fecha.js --------------------------- // 日期工具类
│ │ ├─file.js 
│ │ ├─i18n.js ---------------------------- // 国际化工具类
│ │ ├─menu.js ---------------------------- // 菜单工具类
│ │ ├─model.js 
│ │ ├─move.js 
│ │ ├─pinyin.js -------------------------- // 拼音工具类
│ │ ├─request.js ------------------------- // 请求工具类
│ │ ├─tree.js ---------------------------- // 树形处理类
│ │ ├─util.cookies.js -------------------- // cookies工具类
│ │ ├─util.db.js ------------------------- // 本地缓存类
│ │ ├─util.js ---------------------------- // 通用工具类
│ │ ├─util.log.js ------------------------ // log日志工具类
│ │ └─validate.js ------------------------ // 表单验证帮助类
│ └─views -------------------------------- // 页面视图
│   ├─demo ------------------------------- // 演示视图
│   │ ├─components 
│   │ │ ├─address 
│   │ │ ├─dictionary 
│   │ │ ├─list 
│   │ │ ├─query-builder 
│   │ │ ├─selector 
│   │ │ └─uploader 
│   │ ├─crud 
│   │ ├─iframe-form 
│   │ └─url-form 
│   └─platform --------------------------- // 平台开发
│     ├─auth 
│     ├─bo 
│     ├─bpmn 
│     ├─cat 
│     ├─codegen 
│     ├─data 
│     ├─desktop 
│     ├─file 
│     ├─form 
│     ├─job 
│     ├─mail 
│     ├─message 
│     ├─office 
│     ├─org 
│     ├─rights 
│     ├─script 
│     ├─serv 
│     └─system 
│       ├─identity 
│       └─news 
├─tests ---------------------------------- // 单元测试
└─vue.config.js -------------------------- // vue-cli3 的项目配置文件

src源码目录结构及说明

├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 图标、主题 字体等静态资源
│ ├── business // 业务组件（包含业务数据）
│ ├── components // 公共组件(不含业务数据)
│ ├── constants // 全局常量，比如按钮常量、状态码
│ ├── filters // 全局过滤
│ ├── directives // 全局指令
│ ├── i18n // 国际化 language
│ ├── icons // svg图标
│ ├── layout // 布局组件，整体布局，目前有header-aside布局
│ ├── pages // 公用页面 不涉及过多业务，比如错误页面，登录
│ ├── plugins // 插件 封装（或者集成第三方）了一些插件，方便开发者进行开发
│ ├── router // 路由
│ ├── store // 全局 状态管理
│ ├── utils // 全局公用方法
│ ├── views // view 具体的业务页面
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理，路由控制

api 请求接口

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

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

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

business 业务组件

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

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

components（组件）目录结构及说明

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

constants 全局常量

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

views 页面

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

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