cca-template-alita

基于 Alitajs 的移动端解决方案，更多使用请前往官网 https://alitajs.com/。

开发环境

• 建议 node 环境 14.18.3及以上，npm 版本 6.14.15及以上
• 使用 vscode 开发时，运行 npm run extension ，安装所需依赖插件

技术栈

React + Alita + Antd-mobile + Mobx

快速开始

安装依赖

// 项目根目录下执行
yarn

启动

// 默认测试环境
npm run dev

// 预生产
npm run dev:preProd

// 生产环境
npm run dev:prod

// 热备环境
npm run dev:standby

移动端适配

移动端适配编写以 750px*1334px 为设计稿的尺寸，比如铺满横屏只需要写 width: 750px; 即可，程序会自动适配各种手机尺寸屏幕，适配原理采用的是 rem 适配方案，更多请搜索移动端 rem 适配即可。

本地业务组件文档

yarn run docs

模板已集成自动探测组件文档，请打开 http://localhost:9999/ 即可查看当前项目的本地业务组件文档，端口可能会被占用，请以实际运行的端口为准。

发版本

打开 http://jenkins.demo.com/ 在线 Jenkins 平台，平台地址因项目存在多变，具体请咨询运维人员，点击构建部署，选项如下：

// 默认测试环境
build

// 预生产
build:preProd

// 生产环境
build:pord

// 热备环境
build:standby

代码提交

1. 常规提交须遵循《信息技术部前端编码手册》的Git规约，比如：

   git add .
   git commit -m 'feat: 完善登录'

2. 可使用交互式命令终端，选择合适的类型以及说明回车保存即可：

   npm run commit

目录结构

这里罗列了项目中约定(或推荐)的目录结构，在项目开发中，请遵照这个目录结构组织代码。

├── config
│   └── config.ts
├── dist
├── mock
│   └── app.ts｜tsx
├── public // 资源文件
├── src
│   ├── .umi
│   ├── .umi-production
│   ├── assets // 样式文件
│   ├── ├── fonts
│   └── ├── images
│   │   └── style
│   ├── layouts // 布局
│   │   ├── Layout.tsx
│   │   ├── style.scss
│   ├── common // 通用组件，少量业务逻辑
│   │   ├── components
│   │   │   └── SearchBar
│   │   ├── configs
│   │   │   └── endpoints.ts 
│   │   ├── utils
│   │   ├── store // mbox 状态管理
│   │   │   └── index.ts 
│   │   ├── utils
│   │   │   └── index.ts
│   │   └── constants
│   ├── pages // 通用组件，少量业务逻辑
│   │   ├── Home
│   │   │   ├── components // 业务组件，大量业务逻辑
│   │   │   └── User
│   │   │   ├── style.scss
│   │   │   └── index.tsx
│   │   ├── List
│   │   │   ├── style.scss
│   │   │   └── index.tsx
│   │   └── 404.tsx
│   ├── routes // 路由
│   │   └── index.ts
│   ├── services // 接口
│   │   └── api.ts
│   ├── app.tsx
│   ├── global.ts
│   ├── global.SCSS
│   └── plugin.ts
├── node_modules
│   └── .cache
│       ├── bundler-webpack
│       ├── mfsu
│       └── mfsu-deps
├── .env
├── package.json
├── tsconfig.json
└── typings.d.ts

开发资源指引

第三方库或工具

• 时间处理 dayjs
• 图片压缩 tinypng
• 移动端组件库 mobile
• JSON 表单 dform