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

拉取項目 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技術、交互設計、圖像繪製、數據分析等研究。

歡迎和咱們一塊兒並肩做戰： web@talkmoney.cn
訪問 www.talkmoney.cn 瞭解更多

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