ant design pro 新增頁面

asoren 發布于2019-08-22 16:44 / 3322人閱讀

摘要：新增頁面參考資料由于版本升級到所以重新做了一個分享，下面是目錄地址一項目初始化二新增頁面三設置代理四與服務端交互在下面的任意一個文件夾下面創建一個頁面填寫如下內容內容這是新頁面內容將剛剛寫的組件注冊到路由里面，修改文件內容內容新頁面添加后的

ant design pro 新增頁面

ps:參考資料
1.ant design pro

2.由于pro版本升級到2.0,所以重新做了一個分享，下面是目錄地址

Ant Desing Pro2.0(一)項目初始化

Ant Desing Pro2.0(二)新增頁面

Ant Desing Pro2.0(三)設置代理

Ant Desing Pro2.0(四)與服務端交互

1.在 src/routes/ 下面的任意一個文件夾下面創建一個頁面

// 填寫如下內容

/** NewPage.js內容 */
import React, { Component } from "react";

export default class NewPage extends Component {
  render() {
    return (
      
        這是新頁面
      
    )
  }
}

/** NewPage.less內容 */
@import "~antd/lib/style/themes/default.less";

2.將剛剛寫的組件注冊到路由里面，修改 src/common/router.js文件

/** src/common/router.js內容 */
 "/newPage":{
      component:dynamicWrapper(app,["monitor"],()=> import("../routes/User/NewPage")),
  },


/** src/common/menu.js內容*/
  {
    name:"新頁面",
    icon: "table",
    path:"newPage",
  },

添加后的效果
src/common/router.js

src/common/menu.js

3.運行結果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94614.html

Ant Desing Pro2.0(二)新增頁面

摘要：配置路由在行新增如下內容這行是新增的內容做完如上步驟其實功能是完成了，但是版本中加入了菜單國際化中。所以你剛剛的頁面如下這不是我們想要的效果，讓我在進行修改修改在行新增如下內容新增菜單新增頁面查看效果運行效果讓我做一道連線題把 1.參考資料參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項目初始化 Ant Desing...

vboy1010 2019-08-23 15:41 評論0 收藏0
Ant Desing Pro2.0(一)項目初始化

摘要：寫在前面最近做畢設的時候發現網絡上關于版本的基礎入門資料太少，我一個后端開發人員當時入門也是跌跌撞撞，現在我將我所學的分享出來，避免大家少走一些彎路。 1.寫在前面最近做畢設的時候發現網絡上關于ant designpro2.0版本的基礎入門資料太少，我一個后端開發人員當時入門也是跌跌撞撞，現在我將我所學的分享出來，避免大家少走一些彎路。 2.開發環境你的本地環境需要安裝 node ...

BigNerdCoding 2019-08-23 15:41 評論0 收藏0
Ant Desing Pro2.0(三)設置代理

摘要：參考資料參考參考目錄地址一項目初始化二新增頁面三設置代理四與服務端交互修改文件在將行和行的注釋打開代理前綴，請求格式資源地址將所有以開頭的所有路由都代理到目標地址代理目標地址是否跨域訪問最終請求時候忽略掉舉個例子吧有個接口請求之后會返回 1.參考資料參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項目初始化 Ant D...

Lycheeee 2019-08-23 15:42 評論0 收藏0
Ant Design Pro - 實踐React Hooks - 頁面

摘要：背景目前是社區最炙手可熱的新技術，我們準備追一下熱度，在當前的項目中實踐一下技術。我們的項目使用的腳手架是，初步想法是把現有的一個有狀態頁面組件重構成函數組件。存放表單值的狀態是聲明在列表組件，傳給表單組件。背景 React Hooks目前是React社區最炙手可熱的新技術，我們準備追一下熱度，在當前的項目中實踐一下Hooks技術。我們的項目使用的腳手架是Ant Design P...

wangbjun 2019-08-26 10:30 評論0 收藏0
Ant Desing Pro2.0(四)與服務端交互

摘要：創建在新建文件填入以下代碼導入接口文件，并采用解構的方式，將的文件里面的賦值給這里的是儲存數據的地方，收到以后，會更新數據。我的理解其實是支付寶的框架傳送門 1.參考資料參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項目初始化 Ant Desing Pro2.0(二)新增頁面 Ant Desing Pro2.0(三)...

zhunjiee 2019-08-23 15:44 評論0 收藏0