首先看一下最开始的代码:
这里面大部分的东西都可以删掉,比如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模板网!