启效低代码平台

基于qx-frontend-admin-example项目创建。

基于 Ant Design Pro（v4），使用了 Ant Design（v4.16.x）、UMI（v3.5.x）构建的React（v17）项目，使用TypeScript，Webpack5。

技术栈：UMI + AntD + AntD Pro + dva + XRender

功能特性：

• 多主题
• 国际化
• 登录
• 权限
• UI 测试
• 错误处理

技术特点：

• 按需加载
• 服务端渲染

一、环境准备

NODE 环境：node：v12.22.1以上（或v16.9.1）

使用青谷npm仓库：

npm install -g nrm
nrm add qgNpm http://registry.npm.qgutech.com/
nrm use qgNpm
nrm ls

安装 node_modules（初始化）:

npm install

二、提供的脚本

Ant Design Pro 提供了一些有用的脚本，帮助您快速启动和构建 web 项目、代码样式检查和测试。 package.json中提供的脚本。可以安全地修改或添加其他脚本：

启动项目

yarn start:dev

或

npm start:dev

生成项目

npm run build

检查代码样式

npm run lint

也可以使用脚本自动修复某些 lint 错误：

npm run lint:fix

测试代码

npm test

其它

$ yarn add <package...>
$ yarn remove <package...>

三、参考资料

• 《启效前端低代码方案》
• React
• UMI | UMI 入门
• Ant Design
• Ant Design Pro | github
• XRender
• AntV X6（流程图）
• Official公式文档
• CodeMirror代码编辑器
• JS日期处理类库Moment
• ahooks

四、启效前端规范

• 开发工具：idea、webstorm
• css、html、js 结构与命名都需要具有语义化
• CSS命名规则
  • 遵循BEM命名规则
  • 以qx 开头，如果是模块功能后面跟上模块缩写。eg：qx-fr
• 文件/文件夹名以中划线-连接，eg: rel-selector
• 启用eslint校验
• ts/js规范：
  • 定义interface、type、类 遵循大驼峰命名规范
  • 不能使用命名变量：_
    
• html
  • 如非必要不要，不要增加过多的html标签包裹

五、开启开发者模式

window.sessionStorage.setItem("DEVELOPER_MODE", 1)