--- order: 3 title: 區塊 type: 開發 --- ## 什么是區塊 區塊是研發資產的一種，它是一系列快速搭建頁面的代碼片段，它可以幫助你快速的在項目中初始化好一個頁面，幫助你更快速的開發代碼。當前的區塊都是頁面級別的區塊，你可以理解為它是一些項目中經常會用到的典型頁面的模板，使用區塊其實相當于從已有的項目中復制一些頁面的代碼到你當前的項目中。 - 以前開發一個頁面：創建 JS -> 創建 CSS -> 創建 Model -> 創建 service -> 寫頁面組件。 - 現在開發一個頁面：下載區塊 -> 基于區塊初始化好的頁面組件修改代碼。 ## 使用區塊 > 交互式的 umi block list 需要 umi@2.8.7 及以上版本,詳情請見[blog](/blog/better-block)。 Ant Design Pro 中，使用 umi 進行區塊管理。當我們需要安裝一個區塊的時候，我們需要知道區塊有哪些。 umi 提供了 umi block list 的方式來查看區塊。在 pro 中使用效果看如下圖所示。你可以選中區塊名來進行安裝。  添加別的區塊也非常容易，在命令行中輸入： ```bash umi block add [block url] ``` > Pro 中會默認去 [pro-blocks](https://github.com/ant-design/pro-blocks) 去尋找區塊，而默認的區塊地址則是 [umi-blocks](https://github.com/umijs/umi-blocks)。如果你要在 Pro 中使用 umi 的區塊，需要 add 全路徑。在空項目中使用 Pro 的區塊也是如此。 在我們的[預覽網站](https://preview.pro.ant.design)中，你可以通過點擊右下角的“添加到項目中”獲取對應頁面的命令內容。  ## 添加到路由 默認情況下，添加的區塊路由為 `/[區塊名]`。如果希望添加到對應路徑上，可以使用 `--path` 參數指定路由： ```bash umi block add ant-design-pro/analysis --path=your/path/here ``` ## 找回 Pro v2 中的所有界面 可以在 pro 項目跟目錄中執行 `npm run fetch:blocks` 來下載所有的區塊。得到的界面將與 [preview](https://preview.pro.ant.design/) 中相同。 > fetch:blocks 腳本可能有一些兼容性的問題，如果您碰到了問題，請到官方倉庫提 [issue](https://github.com/ant-design/ant-design-pro/issues)。 ## 更多內容 如果你想進行區塊開發，可以在 [umi 區塊](https://umijs.org/zh/guide/block.html) 中查看完整內容。