簡(jiǎn)介

UMI文檔

Umi 以路由為基礎(chǔ)的，同時(shí)支持配置式路由和約定式路由，保證路由的功能完備，并以此進(jìn)行功能擴(kuò)展（連鎖反應(yīng)）。然后配以生命周期完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求。

UMI 的主要用途包括：

1. 路由管理：UMI 提供了強(qiáng)大的路由功能，可以通過(guò)配置文件定義路由規(guī)則，支持動(dòng)態(tài)路由、嵌套路由、權(quán)限控制等。
2. 狀態(tài)管理：UMI 集成了 dva 數(shù)據(jù)流方案，可以幫助開發(fā)者更好地組織和管理應(yīng)用的狀態(tài)，并提供了一套便捷的數(shù)據(jù)流操作方式。
3. 插件擴(kuò)展：UMI 支持通過(guò)插件機(jī)制進(jìn)行功能擴(kuò)展，可以使用豐富的插件來(lái)增強(qiáng)開發(fā)體驗(yàn)和功能特性，例如國(guó)際化、樣式處理、代理轉(zhuǎn)發(fā)等。
4. 構(gòu)建工具：UMI 集成了 webpack 和 babel，提供了開箱即用的構(gòu)建工具，支持代碼打包、優(yōu)化、壓縮等功能。
5. 腳手架：UMI 提供了一套完整的項(xiàng)目腳手架，可以快速初始化項(xiàng)目結(jié)構(gòu)，并提供了豐富的模板和示例，幫助開發(fā)者快速上手和開發(fā)。

總的來(lái)說(shuō)，UMI 提供了一種高效、便捷的前端開發(fā)模式，幫助開發(fā)者在復(fù)雜的應(yīng)用開發(fā)中提高效率，同時(shí)具備良好的可維護(hù)性和可擴(kuò)展性。

Umi初始化

初始化umi項(xiàng)目框架結(jié)構(gòu)等。

 - mkdir myapp && cd myapp
 - npm create @umijs/umi-app
 - npm install
 - npm start：?jiǎn)?dòng)項(xiàng)目
 - npm run build：打包項(xiàng)目到dist

目錄結(jié)構(gòu)

配置復(fù)雜時(shí)用config/config.js,簡(jiǎn)單時(shí)用自帶的 .umirc.js。
umi默認(rèn)目錄結(jié)構(gòu)

├── dist/                          // 默認(rèn)的打包build 輸出目錄：npm run build
├── mock/                          // mock 文件所在目錄，基于 express
├── public/                         // 變通的數(shù)據(jù)資源目錄和一些無(wú)需打包的資源
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二選一
└── src/                           // 源碼目錄，可選
    ├── layouts/index.js           // 全局布局
    ├── models                       // 數(shù)據(jù)流，自動(dòng)識(shí)別models     
    ├── components              // 全局通用組件 
    ├── wrappers                  // 權(quán)限管理
    ├── pages/                     // 頁(yè)面目錄，里面的文件即路由
        ├── .umi/                  // dev 臨時(shí)目錄，需添加到 .gitignore
        ├── .umi-production/       // build 臨時(shí)目錄，會(huì)自動(dòng)刪除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 頁(yè)面
        ├── page1.js               // 頁(yè)面 1，任意命名，導(dǎo)出 react 組件
        ├── index2.tsx            // 頁(yè)面 2，任意命名，導(dǎo)出 react 組件    
        ├── page1.test.js          // 用例文件，umi test 會(huì)匹配所有 .test.js 和 .e2e.js 結(jié)尾的文件
        └── page2.js               // 頁(yè)面 2，任意命名
    ├── global.css                 // 約定的全局樣式文件，自動(dòng)引入，也可以用 global.less
    ├── global.js                  // 可以在這里加入 polyfill
    ├── app.js                     // 動(dòng)態(tài)：運(yùn)行時(shí)配置文件
├── .umirc.js                      // 靜態(tài)：umi 配置，同 config/config.js，二選一
├── .env                           // 環(huán)境變量
└── package.json

配置文件解析

Umi-—前端應(yīng)用框架（Umi基礎(chǔ)）

mock 存儲(chǔ) mock 文件，此目錄下所有 js 和 ts 文件會(huì)被解析為 mock 文件。

node_modules 依賴包目錄。

.editorconfig讓使用不同編輯器的開發(fā)者在共同開發(fā)一個(gè)項(xiàng)目時(shí)“無(wú)痛”地遵循編碼規(guī)范(編碼風(fēng)格)，就可以使用EditorConfig插件，會(huì)在項(xiàng)目根目錄尋找.editorconfig文件并使用其中定義的編碼風(fēng)格。

.gitignore 是一個(gè)隱藏文件，就跟這個(gè)文件的字面意思一樣，它指明了在用 git上傳文件的時(shí)候需要忽略哪些文件。

.prettierrc在vscode使用右鍵格式化的時(shí)候,會(huì)自動(dòng)幫我們補(bǔ)全一些符號(hào),但有些符號(hào)在eslint中就會(huì)報(bào)語(yǔ)法錯(cuò)誤,可以通過(guò)在根目錄創(chuàng)建.prettierrc文件來(lái)進(jìn)行文件配置

.umirc.ts 配置文件，包含 umi 內(nèi)置功能和插件的配置。

package-lock.json 鎖定安裝時(shí)的包的版本號(hào)，并且需要上傳到git，以保證其他人在npm install時(shí)大家的依賴能保證一致。

package.json 包含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和
umi-plugin- 開頭的依賴會(huì)被自動(dòng)注冊(cè)為插件或插件集。

tsconfig.json 如果一個(gè)目錄下存在一個(gè)tsconfig.json文件，那么它意味著這個(gè)目錄是TypeScript項(xiàng)目的根目錄。
tsconfig.json文件中指定了用來(lái)編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng)。

typings.d.ts 用 ts 寫的模塊在發(fā)布的時(shí)候仍然是用 js 發(fā)布，這就導(dǎo)致一個(gè)問(wèn)題：ts 那么多類型數(shù)據(jù)都沒(méi)了，所以需要一個(gè)
d.ts 文件來(lái)標(biāo)記某個(gè) js 庫(kù)里面文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-487771.html

到了這里，關(guān)于Umi3筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！