拉取項目 luwei.web.study-ant-design-pro, 切換至 page 分支，可看到創建頁面的效果

啟動項目

前置：安裝完依賴包，若未安裝，請移步 安裝項目依賴包

運行命令啟動項目：

npm start

若使用 yarn 安裝的用戶請運行：

yarn start

創建頁面

在項目根目錄下執行命令

umi g page FormDemo1

在 pages 文件夾上就可看到兩個新增文件

image

新建一個同名的文件夾，把這兩個文件放在一起，目錄結構如下

image

路由配置

找到 ./config/router.config.js 文件

增加路徑配置

  // formDemo
 {
    path: ‘/FormDemo‘,
    name: ‘Form Demo‘,
    icon: ‘dashboard‘,
    component: ‘../layouts/UserLayout‘,
    routes: [
      {
        path: ‘/FormDemo/FormDemo1‘,
        name: ‘Form Demo1‘,
        component: ‘./FormDemo1/FormDemo1‘,
      },
    ],
  },
 

image

保存，點擊左側邊欄的菜單，如圖所示

image

作者簡介：李堯暉，蘆葦科技web前端開發工程師，代表作品：飛花亭小程序、續航基因、YY表情紅包、YY疊方塊直播競賽小遊戲。擅長網站建設、微信公眾號開發、微信小程序開發、小遊戲制作、企業微信制作、H5建設，專註於前端框架、服務端渲染、SEO技術、交互設計、圖像繪制、數據分析等研究。

歡迎和我們一起並肩作戰： [email protected]
訪問 www.talkmoney.cn 了解更多

提供深圳微信公眾號外包，高質量的釘釘開發，專業的企業微信建設，東莞微信小程序開發，廣州小遊戲制作，廣東H5建設

創建頁面---基於Ant-Design-Pro-2-0-的CMS管理後臺入門系列