Ant Design Pro v4 基於角色的權限訪問控制實戰教程 #3 使用 umi ui 建立項目

你們好

歡迎來到

求知久久，我是隨風

咱們接着上一節來繼續講解

咱們上一節已經把這個項目建立好了

它是真正跑在這個 8000 端口上的

這是一個後臺項目

可是它也開了另外一個端口

跑在這個 3000 端口上

它叫作這個 umi ui， 上一節

咱們是使用一個命令來建立這個項目的

咱們回顧一下，咱們使用的命令是這個 yarn create umi

可是呢

咱們這節課要講下怎麼來使用這個 umi UI 建立這個項目

咱們就來探索一下這個 umi ui，那麼第一步

咱們就來看一下它的文檔

https://umijs.org/zh/guide/um...

在這個 umi 的官方文檔中

如何要使用的話很簡單

使用這個 umi ui 這個命令就行了

那麼咱們這一節呢

主要就是用 umi ui 來建立一個項目

咱們隨便進到一個目錄中來

咱們來嘗試一下，umi ui

它就會跑下這個 3000 多的端口

就是一個這樣的界面

那麼咱們能夠在這裏點一下這個 "建立"

而後呢

這裏有個應用名稱

咱們就新增一下，client

而後呢

點一下 「下一步」

它這裏呢，能夠選擇這個 antd design pro 的模板，就跟咱們以前這個命令差很少的

就是

咱們這裏是 antd pro 的，選這個就行了。

使用的是 TypeScript，而後這個包管理呢？

這裏我推薦使用的是這個 npm 或者說是 yarn

固然這些均可以用的吧

咱們來試一下吧

點一下 「完成」

這裏就會進行一個初始化的項目

並且會安裝依賴

那麼

咱們就能夠來看一下這個 umi ui 的工具就是用它來代替命令行

這是它的一個好處

就是能夠用它來代替命令行

可視化的一個圖形化工具

可是咱們使用命令行也是同樣的

就像上一節那樣

咱們是使用命令行來建立的，效果是同樣的

咱們這個 umi ui

它會在瀏覽器中跑一個項目

它就像一個圖形化工具同樣，代替

這個命令行的，咱們能夠用它來建立這個項目的，就是咱們能夠不用記憶一堆命令對吧

只要使用這個 umi ui 就能夠了

稍等一下

而後呢

它已經運行完成了

已經把這個項目建立成功了

彈出這個窗口

咱們點下OK吧

等下 ok 就好的

它會從新刷新

它會打開這個項目

等一下，它會打開對吧

這個打開的項目

它那個內容就跟咱們上一節建立的項目的內容差很少的

咱們能夠用這個編輯工具打開來

它會生成這個項目的，antd pro 的項目

跟咱們以前那個它的源碼結構差很少的，只是換了一種方式而已

這樣咱們也能夠把它運行起來

咱們來看一下

任務這裏吧

啓動它的

它就會運行 webpack 這個

編譯命令

這裏已經運行成功了

它又會開啓一個端口

跑在瀏覽器上

這個項目就跟這個 8000 端口的是差很少的吧

好，咱們這一節就來說一下使用這個 umi ui

它是能夠建立這個項目的

相關資源

https://umijs.org/zh/guide/um...