搭建項目
npx @umijs/create-umi-app創建項目- npm run start 運行項目
核心路由
目錄位置
- 只修改pages文件夾下文件即可，路由自動生成
- 組件另行建立component文件夾存放，不要寫在pages里面，理由你們應該也懂
- 這個umi最好是先建立好所有路由文件再寫內容，不然會有點麻煩
路由
- 要想讓框架自動識別路由，就刪除src下的.umirc.ts里面的routers，然后重啟項目即可
- 子路由嵌套
- 建立文件夾，文件夾命名就是路由父級名稱
- 文件夾內建立一個_layout.tsx文件，這個文件就是父級路由內容
- 文件夾內所有其他文件都是這個_layout.tsx的子集文件
- 在_layout.tsx內寫{this.props.children}就可以渲染子文件內容了
- 路由守衛
- wrappers:[] 數組內寫路徑
- 在路徑文件里面直接拋出一個方法，里面寫邏輯
- 如果權限判斷非，使用redirectTo()方法進行重定向
- 如果權限判斷是，可以直接返回<div>{props.children}</div>
- 路由跳轉
- 引入history從umi里 使用方法跟原生react方法一樣
- 引入Link從umi里 使用方法也跟原生一樣 to=‘’ 進行跳轉
- 路由api
- <Prompt />
- 屬性 message 確認離開 參數可以是函數或字符串
- location => return location.pathname !== '' / " ? true : `確定離開去首頁么`
- 屬性 when 確認當前用戶狀態判斷是否給予提示框 （一般用在表單填寫中
- 其他的都是些無關緊要的東西，想了解可以移步官方文檔
umi樣式
- umiJS會自動識別CSS Modules 的使用，只有你把它當做CSS Modules 用時才是 CSS Modules
- 想了解CSS Modules是什么的可以看我文檔
- https://www.cnblogs.com/lrqcx/p/12821588.html
- 也可以去查看阮一峰大神的文檔
- umiJS內置支持 less，不支持sass跟stylus，有需求可以通過配置 chainWebpack或者 umi插件的形式支持