首先看一下最開始的代碼：

這里面大部分的東西都可以刪掉，比如README，只留下中文的那個(gè)就可以了。

之后看看README.md中介紹的特性。

特性

• ?? TypeScript: 應(yīng)用程序級 JavaScript 的語言
• ?? 區(qū)塊: 通過區(qū)塊模板快速構(gòu)建頁面
• ?? 優(yōu)雅美觀：基于 Ant Design 體系精心設(shè)計(jì)
• ?? 常見設(shè)計(jì)模式：提煉自中后臺(tái)應(yīng)用的典型頁面和場景
• ?? 最新技術(shù)棧：使用 React/umi/dva/antd 等前端前沿技術(shù)開發(fā)
• ?? 響應(yīng)式：針對不同屏幕大小設(shè)計(jì)
• ?? 主題：可配置的主題滿足多樣化的品牌訴求
• ?? 國際化：內(nèi)建業(yè)界通用的國際化方案
• ?? 最佳實(shí)踐：良好的工程實(shí)踐助您持續(xù)產(chǎn)出高質(zhì)量代碼
• ?? Mock 數(shù)據(jù)：實(shí)用的本地?cái)?shù)據(jù)調(diào)試方案
• ? UI 測試：自動(dòng)化測試保障前端產(chǎn)品質(zhì)量

再看看模板頁面：

• Dashboard
  • 分析頁
  • 監(jiān)控頁
  • 工作臺(tái)
• 表單頁
  • 基礎(chǔ)表單頁
  • 分步表單頁
  • 高級表單頁
• 列表頁
  • 查詢表格
  • 標(biāo)準(zhǔn)列表
  • 卡片列表
  • 搜索列表（項(xiàng)目/應(yīng)用/文章）
• 詳情頁
  • 基礎(chǔ)詳情頁
  • 高級詳情頁
• 用戶
  • 用戶中心頁
  • 用戶設(shè)置頁
• 結(jié)果
  • 成功頁
  • 失敗頁
• 異常
  • 403 無權(quán)限
  • 404 找不到
  • 500 服務(wù)器出錯(cuò)
• 帳戶
  • 登錄
  • 注冊
  • 注冊成功

安裝依賴

npm install -g tyarn
tyarn

配置啟動(dòng)命令

這里我使用的是webstorm，配置了一個(gè)npm：

此時(shí)還在安裝依賴，需要等一會(huì)：

等一會(huì)以后依賴安裝好了：

第一次啟動(dòng)項(xiàng)目

此時(shí)，我選擇啟動(dòng)項(xiàng)目：

控制臺(tái)會(huì)輸出一個(gè)地址：

瀏覽器進(jìn)行訪問：http://localhost:8000/

編譯一會(huì)兒以后，會(huì)進(jìn)入登錄頁面：

點(diǎn)擊登錄，但是報(bào)了登錄失敗：

查看登錄的代碼

首先我選擇去看mock代碼：

我將登錄條件改為：

if (password === 'zhangdapeng520' && username === 'zhangdapeng') {

此時(shí)，需要：

• 賬號：zhangdapeng
• 密碼：zhangdapeng520

才能夠登錄系統(tǒng)了。

但是重啟服務(wù)以后還是報(bào)了這個(gè)錯(cuò)，說明問題沒有解決：

查看啟動(dòng)代碼

此時(shí)我選擇去看package.json中的啟動(dòng)代碼：

"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"
  },

我發(fā)現(xiàn)啟動(dòng)命令特別多，決定嘗試其他的啟動(dòng)方案，比如：

tyarn start

使用這個(gè)命令以后，再次登錄就成功了。

我們來觀察一下這兩個(gè)命令：

"start": "cross-env UMI_ENV=dev max dev",
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",

可以看出了，默認(rèn)是啟動(dòng)mock服務(wù)的，但是加了MOCK=none以后可以關(guān)閉mock服務(wù)。

而

"dev": "npm run start:dev"

不會(huì)啟動(dòng)mock服務(wù)，所以才登錄不了。

頁面觀察

既然成功了，我們來看看目前的頁面吧。

首頁：

二級管理頁面：

查詢表格：

目前只有這三個(gè)頁面，算是比較簡約的了，后面需要什么頁面就繼續(xù)開發(fā)就好了。文章來源地址http://www.zghlxwxcb.cn/news/detail-847901.html

到了這里，關(guān)于zdpreact_antdesginpro 研究一下react里面比較流行的一個(gè)UI框架，開發(fā)后臺(tái)管理系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！