# 项目开发指南

1. 框架：KOCA提供的前端开发基础框架，包括基础UI组件：登录页、状态页、菜单、导航条等，数据请求封装，数据缓存，字典，权限等，框架的内容一部分以npm包的形式存在于工程中，另一部分控制文件以源码的形式存在于工程中；

2. 模块：基于框架开发的，集成了业务代码的项目，遵守KOCA模块开发的规则，可发布至npm私库成为模块包，模块包可在项目中集成；

3. 项目：用户基于KOCA前端框架，或集成其他模块的基础上生成的项目。

    amo-classic                                         前端工程目录 ${workspaceFolder}
    ├─ build/                                    打包相关配置文件                             
    ├─ mock                                      接口仿真配置目录                             
    │  ├─ api                                    api模块的仿真接口目录
    │  │  └─ key                                 仿真示例目录，路径一般和API路径保持一致（/api/key）
    │  │     ├─ install.js                       安装仿真接口的脚本
    │  │     └─ response.json                    仿真接口的响应数据
    │  ├─ gen_data.js
    │  ├─ install.js                             安装仿真数据脚本
    │  ├─ start.js                               启动仿真服务器脚本
    │  ├─ stop.js                                停止仿真服务器脚本
    │  └─ utils.js
    ├─ node_modules                              项目依赖模块
    ├─ public                                    公共文件目录
    │  ├─ error                                  错误页面目录
    │  ├─ external/                               第三方模块/参考手册目录
    │  ├─ config.json                            编译后配置文件
    │  ├─ favicon.ico                            站点图标
    │  ├─ index.css                              编译后组件样式（本地资源用来替换主题色切换时请求elment-ui站点资源）
    │  └─ index.html                             首页入口文件
    ├─ src                                       源文件目录
    │  ├─ assets                                 资源目录
    │  │  ├─ css
    │  │  │   └─ index.css                       自定义主题的样式文件                    
    │  │  ├─ icons                               svg_icon的目录
    │  │  ├─ scss                              
    │  │  │   ├─ mixin                           样式配置文件目录
    |  │  │   │    ├─ layout-variables.scss      布局相关的scss变量配置文件
    │  │  │   |    └─ theme-variables.scss       主题颜色相关的scss变量配置文件
    │  │  │   └─ index.scss                      业务自定义样式
    │  │  └─ svg_icons                           svg图标的源码目录
    │  ├─ config                                 项目配置文件夹
    │  │  ├─ cache.ts                            缓存接口类定义
    │  │  ├─ request.adaptor.ts                  数据请求适配器
    │  │  └─ setting.ts                          门户的配置项
    │  ├─ locale                                 国际化翻译文件目录
    │  ├─ router                                 VUE路由配置目录
    │  │  └─ static.ts                           静态路由文件
    │  ├─ store                                  VUEX状态管理目录
    │  │  ├─ modules                             VUEX状态管理模块目录
    │  │  │     └─ cacheHub.ts                   缓存状态管理文件                        
    │  │  └─ index.ts                            VUEX状态管理主文件                  
    │  ├─ types                                  框架类型目录
    │  │  ├─ shims-tsx.d.ts                      让IDE识别TSX文件
    │  │  ├─ shims-vue.d.ts                      让IDE识别VUE文件
    │  │  └─ vue.d.ts                            扩展VUE属性文件
    │  ├─ projects                               项目文件夹
    │  │  ├─ amo-classic                         项目名
    │  │  │  ├─ views                            页面目录
    │  │  │  ├─ vue.config.js                    项目自定义的vue.config.js
    │  └─ └─ └─ main.ts                          main入口文件
    ├─ .browserslistrc                           浏览器兼容配置
    ├─ .editorconfig                             IDE编辑器基本设置
    ├─ .env.develop                              生产环境下调试模式的应用参数配置
    ├─ .env.development                          开发环境下的应用参数配置
    ├─ .env.production                           生产环境下的应用参数配置
    ├─ .env.test                                 测试环境下的应用参数配置
    ├─ .eslintignore                             *ESLINT忽略文件配置*
    ├─ .eslintrc.js                              ESLINT配置
    ├─ babel.config.json                           配置GIT忽略哪些文件                       
    ├─ package-lock.json                         NPM包管理状态文件，记录NPM包的版本和依赖关联
    ├─ package.json                              NPM包依赖配置文件
    ├─ postcss.config.js                         PostCSS配置文件
    ├─ README.md                                 项目的说明文档
    ├─ setting.json
    ├─ tsconfig.json                             TypeScript编译配置文件
    ├─ vue.config.js                             VUE项目配置文件
    └─ yarn.lock                                 YARN包管理状态文件，记录NPM包的版本和依赖关联

koca_web
├─ src                                       源文件目录
│  ├─ views                                  资源目录
│  │  ├─api
└─ └─ └─ └─api.vue                           pages页面

koca_web
├─ src                                          源文件目录
│  ├─ projects                                  项目文件夹
│  │  ├─ studio-basic                           项目名
│  │  │  ├─ views                               
│  │  │  │  ├─api
└─ └─ └─ └─ └─ └─api.vue                        pages页面

...
const configAMOModule = require("./src/projects/amo-classic/vue.config.js");
...
...
chainWebpack: config => {
    ...
    configAMOModule(config);
    ...
}
...

module.exports = function (config) {
  config.module
    .rule("")
    .test(/mxClient\.js$/)
    .use("exports-loader")
    .loader("exports-loader?mxClient,mxToolbar,mxEdgeStyle,mxConnectionHandler,mxEllipse,mxConnectionConstraint,mxWindow," +
    "mxObjectCodec,mxGraphModel,mxActor,mxPopupMenu,mxShape,mxEventObject,mxGraph,mxPopupMenuHandler,mxPrintPreview," +
    "mxEventSource,mxRectangle,mxVertexHandler,mxMouseEvent,mxGraphView,mxCodecRegistry,mxImage,mxGeometry,mxCellState," +
    "mxRubberband,mxConstraintHandler,mxKeyHandler,mxDragSource,mxGraphModel,mxEvent,mxUtils,mxEvent,mxCodec,mxCell," +
    "mxConstants,mxPoint,mxGraphHandler,mxCylinder,mxCellRenderer,mxEvent,mxUndoManager,mxStencilRegistry,mxStencil," +
    "mxClipboard,mxConnector,mxCellOverlay,mxHierarchicalLayout")
    .end();
};