前端選型
官網地址
安裝
需要的命令
安裝Node.JS（含有腳本npm）
node -v 檢查node.js
npm install -g cnpm --registry=https://registry.npm.taobao.org 使用cnpm加速
檢查cnpm cnpm -v
安裝yarn (npm install -g yarn)
yarn create umi myApp 初始化項目
cnpm init -y 來初始化 package.json
cnpm install umi --save-dev 安裝 umi 的依賴(多了node_modules)
cnpm install
cnpm start
關閉mock啟動
npm run start:no-mock
http://localhost:8000
改變默認端口號8000
"start": "set port=7000 && umi dev"
官方文檔
命令
npm start 運行
npm run build 打包
布局 （BasicLayout.jsx）
登錄授權的token判斷（SecurityLayout.jsx）
登錄的頭部 UserLayout
登錄 背景 UserLayout.less
config.js路由別名
登錄子窗口組件login/index,jsx
出入參和后端交互
全局前綴 后台代理服務器
設置環境
替換/user開頭的請求訪問的地址（或重定向（反向代理）到另一個地址 不會顯示出來）
沒有訪問到 開發環境下會走自帶的mock請求
發送請求
我的后台收到請求了
前后端傳輸數據
出入參
我改變后情況
入參
注意 如果返回是一個HIMl 說明請求沒有發送成功 被mock攔截了
布局 （導航、頁腳、側邊欄、通知欄以及內容）
Ant Design Pro Layout 組件
uploading-image-290151.png
控制面板
新建頁面
安裝外部模塊
npm install react-quill --save
-save 參數會自動添加依賴到 package.json
使用MOck
Mock.ts 輔助生成模擬數據的第三方庫
模擬延遲
拆分你的 mock 文件
添加跨域請求頭
使用區塊開發頁面
錯誤處理
1.錯誤頁面組件
2.通知報錯
權限管理
路由控制
本地存儲改為后端
刷新權限
Authorized.ts 中 reloadAuthorized
后台獲取 權限路由
umi框架
框架的搭建為 ant-design-pro [umi[dva react redux]]
umi
connect 語法
從model獲取數據使用connect【可以使用命名空間+屬性state】