AntD的前端设计(零)

因为多年至今都是侧重点偏服务端对于美术设计方面可能接触这么深入, 这时候就要公司项目需要抓紧上马服务后台设计, 虽然日常用 boostrap+jquery 就能搭建好常用后台, 但是时代也是在进步所以需要学习更新易用的后台前端框架来适应.

在终端选型之中找到几个备选方案:

Vue+ElementUI
React+AntDesign
Vue+AntDesign

在最后考虑之后最终定型 React+Ant, 注意采用 AntDesignPro 集成大量的脚手架组件.

Umi官网: umi(ant.design)

这里先搭建好最新脚手架服务:

# 首先创建新目录并且进入等待初始化
mkdir myapp && cd myapp

# 使用 npx 下载 umi 脚手架, 内部支持选择 ant-d 框架
npx create-umi@latest

# 生成构建 Ant-D 模板
> Pick Umi App Template › - Use arrow-keys. Return to submit.
#     Simple App
# >   Ant Design Pro
#     Vue Simple App

# 之后配置 npm 执行器和镜像地址等待下载完成没问题
# 现在的项目根目录就是 `myapp`

搭建完成的时候直接启动服务测试即可:

# 开启调试模式
npm run dev

# 打包 dist 正式项目
max build

启动完成就代表目前搭建好开箱即用的服务器, 但是需要知道某些概念:

国际化: 如果需要多国语言支持需要配置 i18n
权限分配: 目前都是采用静态的权限设计, 但是日常都是服务端返回对应权限列表
Mock: 预定义数据, 可以先脱离接口采用本地模拟的服务数据填充给前端
数据流: 现在前端也开始数据建模来构建数据服务, 所以也需要在前端项目定义 model
网络请求: 内部涉及到跨域代理和配置数据模型推送

这里面需要参考 umi 来了解上面功能

这里确认启动项目没问题的时候, 就是迈入服务后台工程化的第一步, 后续就是自定义的权限和数据格式返回.

注意: 推荐前置知识 React/Typescript 相关学习完成

MeteorCat / AntD的前端设计(零)

AntD的前端设计(零)