alita框架背景及其框架结构

1. umi

umi是一个可插拔式的企业级react应用框架
umi是开源项目，蚂蚁内部基于它研发了bigfish并只用于内部，alita的解决方案与bigfish类似。

2. ant-design

2.1 目前适配

• antd(基于react实现)
• ant-design-vue(基于vue的实现)
• ng-zorro-antd(基于Angular的实现)
• ant-design-pro
• ant-design-chart

2.2 适用场景：

• 适合于中大型产品应用
• 适合于基于 react / preact / react-native 的多终端应用
• 适合不同 UI 风格的高度定制需求的应用

2.3 友好性：

• 大部分组件都定义有更改基础样式的接口，开发人员可通过自己需求进行更改。
• 提供了定制主题，对不同公司的不同风格更加友好。

2.4 使用

通过导入antd-mobile样式，如：import { Grid, Button } from 'antd-mobile';就可以在页面中使用被导入的样式，且样式中提供多种api属性，根据不同需求判断是否设置。

3. alita

一套基于Umi的移动端框架，是面向场景化的开发提效方案。通过整合业务流程、简化技术开发，使得开发者能够更专注于业务能力的提升。

3.1 apptype

alita其中的apptype可以设置为：h5、pc、cordova等，可用于ios、android、pc等开发，但在早期打包需要重新更改包名，于是有了appname用于解决这一问题。

3.2 alita致力于

通过整合业务流程，简化技术开发，是开发者能够专注于业务能力开发。
对于一般开发者来说，就是对src/pages/之下的文件进行开发，我们需要考虑的便是业务逻辑的开发，其余不用管太多。

3.3 工程结构

config/
  config.ts ------ 配置文件(es5语法)
mock/ ------ mock文件（用于存放模拟从服务端请求来的数据）
  app.ts ------ 存mock数据
src/
  assets/ ------ 静态图片资源
  models/ ------ 请求运行时的数据并将其传递到页面
  pages/ ------ 以react-routes库为基础, 根据文件名字生成对应路由
    index/	------ 页面文件
      index.less ------	页面样式(CSS)
      index.tsx ------ 页面
  services/ ------ 请求的封装
      api.ts ------ 提供从服务端获取数据的接口
  app.ts ------ 入口文件 , 运行时配置
  global.ts ------ 全局资源
  global.less ------ 全局样式

3.3.1 config/config.ts

这是几乎每个项目都需要配置的文件，在alita项目中则可设置开发的项目开发类型以及布局情况。
如：

appType: 'h5',
mobileLayout: true,

3.3.2 mock/app.ts

mock文件中定义一些前端所需要的数据，模拟从服务端请求过来，那么在前端开发过程中就可以使用这些模拟数据，而不必真正从服务端请求。对前后端开发分离提供了良好的环境。

3.3.3 src/assets/

用于存放项目中可能会用到的静态图片资源，通过@/assets/xxx.png调用。

3.3.4 src/models/

models文件中定义一些模型文件，它通过指定路径来请求数据，并且将请求到的数据定义到一个model中，想要使用这些被请求的数据时就可以导入这个model。

3.3.5 src/pages

这个文件下只有两种类型的文件：.less和.tsx，分别用于存放页面的css样式和页面本体，当然对于业务上的开发都在这个文件之下。

3.3.6 src/services/api.ts

这里用于请求服务端的数据，在目前来说，用于请求mock数据，它定义请求路径和请求方式，并且对外提供这个请求的请求方法，在调用时导入并调用即可。

3.3.7 src/app.ts

用于初始配置。如配置一些基础的navBar、titleList等。

---

本人学历有限，有问题的地方希望诸位给出指导，谢谢

---