首先看一下最开始的代码：
这里面大部分的东西都可以删掉，比如README，只留下中文的那个就可以了。
之后看看README.md中介绍的特性。
特性
- 💡 TypeScript: 应用程序级 JavaScript 的语言
- 📜 区块: 通过区块模板快速构建页面
- 💎 优雅美观：基于 Ant Design 体系精心设计
- 📐 常见设计模式：提炼自中后台应用的典型页面和场景
- 🚀 最新技术栈：使用 React/umi/dva/antd 等前端前沿技术开发
- 📱 响应式：针对不同屏幕大小设计
- 🎨 主题：可配置的主题满足多样化的品牌诉求
- 🌐 国际化：内建业界通用的国际化方案
- ⚙️ 最佳实践：良好的工程实践助您持续产出高质量代码
- 🔢 Mock 数据：实用的本地数据调试方案
- ✅ UI 测试：自动化测试保障前端产品质量
再看看模板页面：
- Dashboard
- 分析页
- 监控页
- 工作台
- 表单页
- 基础表单页
- 分步表单页
- 高级表单页
- 列表页
- 查询表格
- 标准列表
- 卡片列表
- 搜索列表（项目/应用/文章）
- 详情页
- 基础详情页
- 高级详情页
- 用户
- 用户中心页
- 用户设置页
- 结果
- 成功页
- 失败页
- 异常
- 403 无权限
- 404 找不到
- 500 服务器出错
- 帐户
- 登录
- 注册
- 注册成功
安装依赖
npm install -g tyarn
tyarn
配置启动命令
这里我使用的是webstorm，配置了一个npm：
此时还在安装依赖，需要等一会：
等一会以后依赖安装好了：
第一次启动项目
此时，我选择启动项目：
控制台会输出一个地址：
浏览器进行访问：http://localhost:8000/
编译一会儿以后，会进入登录页面：
点击登录，但是报了登录失败：
查看登录的代码
首先我选择去看mock代码：
我将登录条件改为：
if (password === 'zhangdapeng520' && username === 'zhangdapeng') {
此时，需要：
- 账号：zhangdapeng
- 密码：zhangdapeng520
才能够登录系统了。
但是重启服务以后还是报了这个错，说明问题没有解决：
查看启动代码
此时我选择去看package.json中的启动代码：
"scripts": {
"analyze": "cross-env ANALYZE=1 max build",
"build": "max build",
"deploy": "npm run build && npm run gh-pages",
"dev": "npm run start:dev",
"gh-pages": "gh-pages -d dist",
"i18n-remove": "pro i18n-remove --locale=zh-CN --write",
"postinstall": "max setup",
"jest": "jest",
"lint": "npm run lint:js && npm run lint:prettier && npm run tsc",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
"openapi": "max openapi",
"prepare": "husky install",
"prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
"preview": "npm run build && max preview --port 8000",
"record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login",
"serve": "umi-serve",
"start": "cross-env UMI_ENV=dev max dev",
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",
"start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev",
"start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
"start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",
"test": "jest",
"test:coverage": "npm run jest -- --coverage",
"test:update": "npm run jest -- -u",
"tsc": "tsc --noEmit"
},
我发现启动命令特别多，决定尝试其他的启动方案，比如：
tyarn start
使用这个命令以后，再次登录就成功了。
我们来观察一下这两个命令：
"start": "cross-env UMI_ENV=dev max dev",
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",
可以看出了，默认是启动mock服务的，但是加了MOCK=none以后可以关闭mock服务。
而
"dev": "npm run start:dev"
不会启动mock服务，所以才登录不了。
页面观察
既然成功了，我们来看看目前的页面吧。
首页：
二级管理页面：
查询表格：
文章来源：https://www.toymoban.com/news/detail-847901.html
目前只有这三个页面，算是比较简约的了，后面需要什么页面就继续开发就好了。文章来源地址https://www.toymoban.com/news/detail-847901.html
到了这里，关于zdpreact_antdesginpro 研究一下react里面比较流行的一个UI框架，开发后台管理系统的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
